• 从零搭建Vue项目

    目录

    环境准备

    NodeJS安装

    ​编辑

    2. 选择安装目录

    3. 验证NodeJS环境变量

    4. 配置npm的全局安装路径

    5. 切换npm的淘宝镜像

    6. 安装Vue-cli

    Vue项目创建

    1. 打开UI界面

    2. 打开项目管理器

    3. 创建项目

    vue项目目录结构介绍

    运行vue项目

    Vue项目开发流程

    Vue组件库Element

    Element快速入门

    案例

    代码实现

     环境搭建

    整体布局

    表格编写

    整体页面代码如下：

    打包部署

    前端工程打包

    部署前端工程

    nginx介绍

    部署

    环境准备

    NodeJS安装

    2. 选择安装目录

    3. 验证NodeJS环境变量

    NodeJS 安装完毕后，会自动配置好环境变量，我们验证一下是否安装成功，通过： node -v

    4. 配置npm的全局安装路径

    使用管理员身份运行命令行，在命令行中，执行如下指令：

    npm config set prefix "E:\develop\NodeJS"

    注意：E:\develop\NodeJS 这个目录是NodeJS的安装目录

    5. 切换npm的淘宝镜像

    使用管理员身份运行命令行，在命令行中，执行指令（网络搜索）

    6. 安装Vue-cli

    使用管理员身份运行命令行，在命令行中，执行如下指令：

    npm install -g @vue/cli

    Vue项目创建

    1. 打开UI界面

    在命令行中，执行如下指令：

     vue ui

    2. 打开项目管理器

    3. 创建项目

    创建项目的过程，需要联网进行，这可能会耗时比较长的时间，请耐心等待。 windows的命令行，容易卡顿，我们可以随机敲击一下键盘。

    如果出现如下字样，就说明前端工程已经创建完毕了。

    创建完毕后，就可以直接关闭页面和命令行了，到此工程创建完毕。

    vue项目目录结构介绍

    通过软件打开之前创建的vue文件夹

    vue项目的标准目录结构以及目录对应的解释如下图所示:

    其中我们平时开发代码就是在src目录下

    运行vue项目

    运行vue项目的2种方式

    一、命令行方式

    直接基于cmd命令窗口，在vue目录下，执行输入命令npm run serve即可，如下图所示：

    二、通过VS Code提供的图形化界面 ，如下图所示：（注意：NPM脚本窗口默认不显示，可以参考本节的最后调试出来）

    点击之后，我们等待片刻，即可运行，在终端界面中，我们发现项目是运行在本地服务的8080端口，我们直接通过浏览器打开地址

    最终浏览器打开后，呈现如下界面，表示项目运行成功

    其实此时访问的是 src/App.vue这个根组件，此时我们打开这个组件，修改代码：添加内容Vue

    只要我们保存更新的代码，我们直接打开浏览器，不需要做任何刷新，发现页面呈现内容发生了变化，如下图所示：

    这就是我们vue项目的热更新功能

    对于8080端口，经常被占用，所以我们可以去修改默认的8080端口。我们修改vue.config.js文件的内容，添加如下代码：

    devServer:{
        port:7000
    }

    如下图所示，然后我们关闭服务器，并且重新启动，

    NPM脚本窗口调试出来

    第一步：通过设置/用户设置/扩展/MPM更改NPM默认配置，如下图所示

    然后重启VS Code，并且双击打开package.json文件，然后点击资源管理器处的3个小点，勾选npm脚本选项，如图所示

    Vue项目开发流程

    访问的首页是index.html，但是我们找到public/index.html文件，打开之后发现，里面没有什么代码，但是能够呈现内容丰富的首页：如下图所示：

    对于vue项目，index.html文件默认是引入了入口函数main.js文件，我们找到src/main.js文件，其代码如下：

    1. import Vue from 'vue'
    2. import App from './App.vue'
    3. import router from './router'
    4.  
    5. Vue.config.productionTip = false
    6.  
    7. new Vue({
    8.   router,
    9.   render: h => h(App)
    10. }).$mount('#app')

    上述代码中，包括如下几个关键点：

    • import: 导入指定文件，并且重新起名。例如上述代码import App from './App.vue'导入当前目录下得App.vue并且起名为App

    • new Vue(): 创建vue对象

    • $mount('#app');将vue对象创建的dom对象挂在到id=app的这个标签区域中，作用和之前学习的vue对象的le属性一致。

    • router: 路由，详细在后面的小节讲解

    • render: 主要使用视图的渲染的。

    来到public/index.html中，我们删除div的id=app属性，打开浏览器，发现之前访问的首页一片空白，如下图所示，这样就证明了，我们main.js中通过代码挂在到index.html的id=app的标签区域的。

    此时我们知道了vue创建的dom对象挂在到id=app的标签区域，但是我们还是没有解决最开始的问题：首页内容如何呈现的？这就涉及到render中的App了，如下图所示：

    那么这个App对象怎么回事呢，我们打开App.vue,注意的是.vue结尾的都是vue组件。而vue的组件文件包含3个部分：

    • template: 模板部分，主要是HTML代码，用来展示页面主体结构的

    • script: js代码区域，主要是通过js代码来控制模板的数据来源和行为的

    • style: css样式部分，主要通过css样式控制模板的页面效果得

    如下图所示就是一个vue组件的小案例：

    此时我们可以打开App.vue，观察App.vue的代码，其中可以发现，App.vue组件的template部分内容，和我们浏览器访问的首页内容是一致的，如下图所示：

    1. <template>
    2.   <div id="app">
    3.     {{message}}
    4.   div>
    5. template>
    6.  
    7. <script>
    8. export default {
    9.   data(){
    10.     return {
    11.       "message":"hello world"
    12.     }
    13.   }
    14. }
    15. script>
    16. <style>
    17.  
    18. style>

    Vue组件库Element

    对于ElementUI，只需要学会如何从ElementUI的官网拷贝组件到我们自己的页面中，并且做一些修改即可。其官网地址：Element - The world's most popular Vue UI framework

    Element快速入门

    首先，我们先要安装ElementUI的组件库，打开VS Code，停止之前的项目，然后在命令行输入如下命令：

    npm install element-ui@2.15.3 

    然后我们需要在main.js这个入口js文件中引入ElementUI的组件库，其代码如下：

    1. import ElementUI from 'element-ui';
    2. import 'element-ui/lib/theme-chalk/index.css';
    3.  
    4. Vue.use(ElementUI);

    然后我们需要按照vue项目的开发规范，在src/views目录下创建一个vue组件文件，注意组件名称后缀是.vue，并且在组件文件中编写之前介绍过的基本组件语法，代码如下：

    1. <template>
    2.  
    3. template>
    4.  
    5. <script>
    6. export default {
    7.  
    8. }
    9. script>
    10.  
    11. <style>
    12.  
    13. style>

    最后我们只需要去ElementUI的官网，找到组件库，然后找到按钮组件，抄写代码即可

    复制组件代码到我们的vue组件文件中，操作如下图所示：

    最后，我们需要在默认访问的根组件src/App.vue中引入我们自定义的组件，具体操作步骤如下：

    然后App.vue组件中的具体代码如下，代码是我们通过上述步骤引入element-view组件时自动生成的。

    1. <template>
    2.   <div id="app">
    3.     
    4.     <element-view>element-view>
    5.   div>
    6. template>
    7.  
    8. <script>
    9. import ElementView from './views/Element/ElementView.vue'
    10. export default {
    11.   components: { ElementView },
    12.   data(){
    13.     return {
    14.       "message":"hello world"
    15.     }
    16.   }
    17. }
    18. script>
    19. <style>
    20.  
    21. style>

    案例

    代码实现

     环境搭建

    首先我们来到VS Code中，在views目录下创建 tlias/EmpView.vue这个vue组件，并且编写组件的基本模板代码，其效果如下图所示：

    并且需要注意的是，我们默认访问的是App.vue这个组件，而我们App.vue这个组件之前是引入了element-view这个组件，此时我们需要修改成引入emp-view这个组件，并且注释掉之前的element-view这个组件，此时App.vue整体代码如下：

    1. <template>
    2.   <div id="app">
    3.     
    4.     
    5.     <emp-view>emp-view>
    6.   div>
    7. template>
    8.  
    9. <script>
    10. import EmpView  './views/tlias/EmpView.vue'
    11. // import ElementView  './views/Element/ElementView.vue'
    12. export default {
    13.   components: {EmpView },
    14.   data(){
    15.     return {
    16.       "message":"hello world"
    17.     }
    18.   }
    19. }
    20. script>
    21. <style>
    22.  
    23. style>

    打开浏览器，我们发现之前的element案例内容没了，从而呈现的是一片空白，那么接下来我们就可以继续开发了。

    整体布局

    直接来到ElementUI的官网，找到布局组件

    从官网提供的示例，我们发现由现成的满足我们需求的布局，所以我们只需要做一位代码搬运工即可。拷贝官方提供的如下代码直接粘贴到我们EmpView.vue组件的template模块中即可：

    1. <el-container>
    2.     <el-header>Headerel-header>
    3.     <el-container>
    4.         <el-aside width="200px">Asideel-aside>
    5.         <el-main>Mainel-main>
    6.     el-container>
    7. el-container>

    因为我们没有拷贝官方提供的css样式，所以和官方案例的效果不太一样，但是我们需要的布局格式已经有，具体内容我们有自己的安排。首先我们需要调整整体布局的高度，所以我们需要在上添加一些样式，代码如下：

    2. <el-container style="height: 700px; border: 1px solid #eee">

    略

    表格编写

    右侧显示的是表单和表格，首先我们先来完成表格的制作，我们同样在官方直接找表格组件，也可以直接通过我们上述容器组件中提供的案例中找到表格相关的案例，如下图所示：

    找到表格的代码，复制到我们布局容器的主题区域，template模块代码如下：

    1. <el-table :data="tableData">
    2.         <el-table-column prop="date" label="日期" width="140">
    3.         el-table-column>
    4.         <el-table-column prop="name" label="姓名" width="120">
    5.         el-table-column>
    6.         <el-table-column prop="address" label="地址">
    7.         el-table-column>
    8. el-table>

    表格是有数据模型的绑定的，所以我们需要继续拷贝数据模型，代码如下：

    1.  data() {
    2.       return {
    3.         tableData: [
    4.             {
    5.                 date: '2016-05-02',
    6.                 name: '王小虎',
    7.                 address: '上海市普陀区金沙江路 1518 弄'
    8.             }
    9.         ]
    10.       }

    浏览器打开，呈现如下效果：

    但是这样的表格和数据并不是我们所需要的，所以，接下来我们需要修改表格，添加列，并且修改列名。代码如下：

    1. <el-table-column prop="name" label="姓名" width="180">el-table-column>
    2. <el-table-column prop="image" label="图像" width="180">el-table-column>
    3. <el-table-column prop="gender" label="性别" width="140">el-table-column>
    4. <el-table-column prop="job" label="职位" width="140">el-table-column>
    5. <el-table-column prop="entrydate" label="入职日期" width="180">el-table-column>
    6. <el-table-column prop="updatetime" label="最后操作时间" width="230">el-table-column>
    7. <el-table-column label="操作" >
    8.     <el-button type="primary" size="mini">编辑el-button>
    9.     <el-button type="danger" size="mini">删除el-button>
    10. el-table-column>

    需要注意的是，我们列名的prop属性值得内容并不是乱写的，因为我们将来需要绑定后台的数据的，所以如下图所示：

    并且此时我们data中之前的数据模型就不可用了，所以需要清空数据，设置为空数组，代码 如下：

    1.  data() {
    2.       return {
    3.         tableData: [
    4.            
    5.         ]
    6.       }
    7.     }

    略

    整体页面代码如下：
    1. <template>
    2.     <div>
    3.         
    4.         <el-container style="height: 700px; border: 1px solid #eee">
    5.             <el-header style="font-size:40px;background-color: rgb(238, 241, 246)">tlias 智能学习辅助系统el-header>
    6.             <el-container>
    7.                 <el-aside width="200px">
    8.                      <el-menu :default-openeds="['1', '3']">
    9.                         <el-submenu index="1">
    10.                             <template slot="title"><i class="el-icon-message">i>系统信息管理template>
    11.                           
    12.                             <el-menu-item index="1-1">部门管理el-menu-item>
    13.                             <el-menu-item index="1-2">员工管理el-menu-item>
    14.                           
    15.                      
    16.                         el-submenu>
    17.                      el-menu>
    18.                 el-aside>
    19.                 <el-main>
    20.                     
    21.                     <el-form :inline="true" :model="searchForm" class="demo-form-inline">
    22.                         <el-form-item label="姓名">
    23.                             <el-input v-model="searchForm.name" placeholder="姓名">el-input>
    24.                         el-form-item>
    25.                         <el-form-item label="性别">
    26.                             <el-select v-model="searchForm.gender" placeholder="性别">
    27.                             <el-option label="男" value="1">el-option>
    28.                             <el-option label="女" value="2">el-option>
    29.                             el-select>
    30.                         el-form-item>
    31.                           <el-form-item label="入职日期">
    32.                              <el-date-picker
    33.                                 v-model="searchForm.entrydate"
    34.                                 type="daterange"
    35.                                 range-separator="至"
    36.                                 start-placeholder="开始日期"
    37.                                 end-placeholder="结束日期">
    38.                             el-date-picker>
    39.                         el-form-item>
    40.                         <el-form-item>
    41.                             <el-button type="primary" @click="onSubmit">查询el-button>
    42.                         el-form-item>
    43.                     el-form>
    44.                     
    45.                     <el-table :data="tableData">
    46.                         <el-table-column prop="name"      label="姓名" width="180">el-table-column>
    47.                         <el-table-column prop="image"     label="图像" width="180">el-table-column>
    48.                         <el-table-column prop="gender"    label="性别" width="140">el-table-column>
    49.                         <el-table-column prop="job"       label="职位" width="140">el-table-column>
    50.                         <el-table-column prop="entrydate" label="入职日期" width="180">el-table-column>
    51.                         <el-table-column prop="updatetime" label="最后操作时间" width="230">el-table-column>
    52.                         <el-table-column label="操作" >
    53.                             <el-button type="primary" size="mini">编辑el-button>
    54.                             <el-button type="danger" size="mini">删除el-button>
    55.                         el-table-column>
    56.                     el-table>
    57.  
    58.                     
    59.                     <el-pagination
    60.                         @size-change="handleSizeChange"
    61.                         @current-change="handleCurrentChange"
    62.                         background
    63.                         layout="sizes,prev, pager, next,jumper,total"
    64.                         :total="1000">
    65.                     el-pagination>
    66.                 el-main>
    67.             el-container>
    68.         el-container>
    69.     div>
    70. template>
    71.  
    72. <script>
    73. export default {
    74.      data() {
    75.       return {
    76.         tableData: [
    77.            
    78.         ],
    79.         searchForm:{
    80.             name:'',
    81.             gender:'',
    82.             entrydate:[]
    83.         }
    84.       }
    85.     },
    86.     methods:{
    87.         onSubmit:function(){
    88.             console.log(this.searchForm);
    89.         },
    90.         handleSizeChange(val) {
    91.             console.log(`每页 ${val} 条`);
    92.         },
    93.         handleCurrentChange(val) {
    94.             console.log(`当前页: ${val}`);
    95.         }
    96.     }
    97. }
    98. script>
    99.  
    100. <style>
    101.  
    102. style>

    打包部署

    我们的前端工程开发好了，但是我们需要发布，那么如何发布呢？主要分为2步：

    1. 前端工程打包

    2. 通过nginx服务器发布前端工程

    前端工程打包

    接下来我们先来对前端工程进行打包

    我们直接通过VS Code的NPM脚本中提供的build按钮来完整，如下图所示，直接点击即可：

    然后会在工程目录下生成一个dist目录，用于存放需要发布的前端资源，如下图所示

    部署前端工程

    nginx介绍

    nginx: Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件（IMAP/POP3）代理服务器。其特点是占有内存少，并发能力强，在各大型互联网公司都有非常广泛的使用。

    niginx在windows中的安装是比较方便的，直接解压即可。将找到的的nginx-1.22.0.zip压缩文件拷贝到无中文的目录下，直接解压即可，如下图所示就是nginx的解压目录以及目录结构说明：

    我们如果要发布，直接将资源放入到html目录中。

    部署

    将我们之前打包的前端工程dist目录下得内容拷贝到nginx的html目录下，如下图所示：

    然后我们通过双击nginx下得nginx.exe文件来启动nginx，如下图所示：

    nginx服务器的端口号是80，所以启动成功之后，我们浏览器直接访问http://localhost:80 即可，其中80端口可以省略

    PS: 如果80端口被占用，我们需要通过conf/nginx.conf配置文件来修改端口号。如下图所示：

  • 相关阅读:
    为什么短视频离不开美颜SDK？短视频领域的秘密武器
    Mygin上下文之sync.Pool复用
    【前端之ES6语法】
    Yocto buildhistory介绍
    使用Vitis HLS创建属于自己的IP
    和用户相关的命令
    从0开始只要三步手写一个MyBatis
    vue3中弹框中的el-select下拉组件显示value而不显示label
    适配器模式适配出栈和队列及优先级队列
    【教3妹学算法-每日1题】设计有序流
  • 原文地址：https://blog.csdn.net/m0_73879806/article/details/136667370