vue项目搭建流程

àì夳堔傛蜴生んèń 2021-09-18 09:52 560阅读 0赞

**1、安装node(主要用于使用npm包管理器)，配置npm的环境变量**

**安装包下载官网地址：**[https://nodejs.org/zh-cn/][https_nodejs.org_zh-cn]（推荐使用长期LTS版，长期支持，稳定）

注意下载的位数，默认是win10的64位，下载mac，win7，32位等可点击官网顶部的下载。

直接一直下一步安装即可，可以更改安装路径，但还是建议默认路径安装。

node安装包安装完自带node js的配置，只需配置npm的变量即可。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70][]

**2、全局安装脚手架（只需安装一次即可，两者都安装执行）**

（1）3.X版本安装

npm install -g @vue/cli

（2）低版本安装

npm install -g @vue/cli-init

**3、在想要创建项目的目录下打开cmd命令行（选择需要安装的一个版本即可）**

注：hello-word是我要安装的项目名，根据实际需求更改项目名

（1）3.X版本安装（不会看到webpack的配置文件）

vue create hello-world

（2）低版本安装（会看到webpack的配置文件，推荐使用）

vue init webpack hello-world

**4、安装步骤教程**

（1）3.X安装步骤：

①、系统将提示您选择预设

可以选择基本Babel + ESLint设置附带的默认预设，也可以选择“手动选择功能”以选择所需的功能

(推荐选择第二个，手动选择)

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1][]

②、根据个人需要选择配置项（选择方法：空格即可）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2][]

③、路由器是否选择history模式（推荐选择 y，如果选择n，那么路由会默认为hash模式）

④、selint语法选择（推荐选择eslint+standard config:标准模式）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 3][]

⑤、检测方式（推荐选择lint on sava）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 4][]

⑥、文件类型（推荐使用json）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 5][]

⑦、保存预设以供未来使用（推荐使用 y）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 6][]

⑧、保存预设并命名

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 7][]

（2）低版本安装步骤：

前面四步都可以一路回车，第五步询问是否安装vue-router，选择是，第六步使用eslint代码检查，选择否，第七步设置单元测试，选择否，第八步测试监听，选择否，第九步选择npm即可，等待安装完成

（其实安装都没有固定的步骤，完全根据个人项目需求，这里只是推荐大众化的步骤）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 8][]

**5、文件夹详解**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 9][]

（1）、src文件夹放置所有的资源文件，一般会被webpack用来打包

①assets文件夹放置资源文件，如：css，js，fonts

②components文件夹放置所有的子组件，即每个页面级组件的子组件，例如：index页面级组件，把它分为header、content、footer三部分，只要在components文件夹下新建一个index文件夹（为了区分其他组件），放入对应的子组件

③pages文件夹放置所有的页面级组件

④router文件夹中index用来配置路由信息

⑤main.js是入口文件，可在此引入公共的样式等

（2）、static放置的资源文件不会最终被weback打包（一般放置图片文件和本地模拟的json数据）

**6、更改配置**

（1）、更改App.vue文件

更改为：（目的：插入一个路由插槽，进行页面的跳转，显示不同的路由）

（2）、更改main.js文件

new Vue({
        el: '#app',
        router,
        components: { App },
        template: '<App/>'
    })

更改为：（目的：以app做为根组件，每次在路由插槽渲染页面）（如果有语法报错，禁用eslint检查即可）

new Vue({
        el: '#app',
        router,
        render(h){
            return h(App)
        }
    })

（3）、更改router文件夹的index文件（根据项目需求，引入对应页面，配置路由信息，进行页面跳转）（  /  代表跟路径）

import Vue from 'vue'
    import Router from 'vue-router'
    // import HelloWorld from '@/components/HelloWorld'
    // 首页
    import Index from "../pages/Index";
    // 登录
    import Login from "../pages/Login"
    
    Vue.use(Router);
    
    export default new Router({
      linkExactActiveClass: "act",
      mode: "history",
      routes: [
        {
          path: '/Index',
          name: 'Index',
          component: Index
        },
        {
          path: '/',
          name: 'Login',
          component: Login
        }
      ]
    })

**7、项目启动方式**

（1）3.X版本启动方式

npm run serve

（2）低版本启动方式

npm run dev

好了，项目就搭建配置完成了，现在就开始着手自己的项目开发吧。

如有问题，请指出，接受批评。

个人微信公众号：

![20200824121832720.png][]

[https_nodejs.org_zh-cn]: https://nodejs.org/zh-cn/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]: /images/20210812/7274f6ce778548cb86efb486e3cf8cbd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1]: /images/20210812/2a37cea991c04e5cafdc234f2068dee3.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2]: /images/20210812/741bdcf8afef4f9189f74dc0a0ba8cd1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 3]: /images/20210812/5d1857a342db4ba89b997643994426d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 4]: /images/20210812/a382dbd2edef402b91826318287703c0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 5]: /images/20210812/00f602d412cf4c6ea0420e45cd4a28e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 6]: /images/20210812/5e7e6a94161c41d7a008debf4d66553e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 7]: /images/20210812/89468b997d6e44e491c4f34bffd10b01.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 8]: /images/20210812/b9751ff6e36e4b11a4cdaf8564c6ac41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 9]: /images/20210812/dd7e8edc69264e3c9cbdc771c9e5a24d.png
[20200824121832720.png]: /images/20210812/ba4bee0e827a4bc5bf82a045df5ecd1a.png