Vue工程化开发-杨标的博客

Vue工程化开发

Vue工程化是为了应付在单页面开发里面的大型项目，它提全套的解决方案，使用Vue全家桶完成整个项目的开发，期间可能会使用到第三方的框架

在进行工程化开发的时候，Vue需要借用于webpack来实现工程化，因为SPA本质上面只有一个页面，所有页面跳都是虚拟的，通过组件来进行的，而这些组件也不能够直接在浏览器里面运行，所以需要借用于webpack来进行统译

webpack与vue的结合配置非常麻烦，对于初学者为说相当复杂，但是VUE提供一种便捷的方案去创建工程化的项目，这种东西叫“脚手架”

安装Vue脚手架

Vue的脚手架是快速构建Vue单页面开发平台。目的使用到的脚手架是4.X。本次授课主要以4.0及以上为主

之前的版本3以前的版本，它的创建方式与现在的不同，我们后期做对比

$ npm install @vue/cli -g

安装完成以后，我们可以在DOS里面执行如下命令去看版本

$ vue -V

使用脚手架来创建Vue的工程化项目

Vue的工程化项目它的创建方式有两种，第一种是图形界面创建，第二种是命令控制台创建

图形创建方式

第一步：首先，在你需要创建的文件夹下面打开控制台输入如下命令

$ vue ui

这个时候会启动一个浏览器，如下图所示

1572436588074

第二步：切换到创建项目，根据提示进行创建

1572436723164

1572436823060

填写项目的相关信息，选择包管理器为npm或yarn

1572436875268

在这里，我们选择手动创建项目配置

1572437073302

在这一步里面，根据要应的需求，开启相应的插件 1572437196284

根据上一步的配置，选择相应的配置

1572437228163

在这里，我们不保存配置，下次如果要创建项目重新来一遍

当点击完成以后在控制台就会创建项目

1572437306267

想过漫长的等待，我们就看到一个项目了

命令行方式创建

它是一种快递的创建试，我们只需要文件夹下面打开控制台，执行下面的命令就可以了

$ vue create sms_spa1

执行命令以后出现如下界面，需要我选择配置

1572437832803

在此，我们选择第二个Manually select features,手动配置

1572437972398

出现这个界面以后，按空格选择自己所需要的插件

1572437998580

在这一步，问我们的Vue-router是否启用history模式，我们选NO。因为我们使用hash模式（hash模式会在地址栏产生一个#号）

1572438051922

在这里，我们选择node-sass来进行

1572438082094

这一步询我们配置文件写在什么地方。我们选第一个，把配置文件写在单独的文件里面

1572438124594

询问是否保存这个配置，我们不保存，下次重新创建

注意：使用控制台创建的时候，如果发现系统里面已经安装了yarn,那么优先使用yarn

分析脚手架创建的目录结构

1572438358625

public公共目录，存放了一个index.html文件，这是单页面的html文件
src目录是我们的程序员的目录，我们所开发的vue代码全在这里面
.babel.config.js这是babel的配置文件
postcss.config.js 这是postcss的配置文件
.browserslistrc这个是用于配置浏览器列表兼容性的，以前是写在package.json里面的

作为一个程序员，它主要使用的目录就是src目录

src目录结构

assets静态资源目录，在vue开发过程当，我们可以把图片，CSS以及SCSS等放在里面
components目录用于存放vue的组件（模块组件，也叫公共组件）
router文件夹里面存放路由文件，一般情况下，里面只有一个index.js文件
store文件夹里面存放vuex的状态，action以及mapper，mutation等
views文件夹，存放vue的虚拟页面（Login.vue或register.vue）
App.vue 项目当中的根组件，入口组件，当相于我们之前学习的<div id="app"></div>
main.js这个是整个程序的入口文件，也是webpack的入口文件，所有程序从这个文件启动

脚手架创建的项目启动

使用@vue/cli 创建的项目，它有两种，一个是开发环境，一个是生产环境，针对不同的环境，我们要启动不同的命令，这个时候，我们可以打开 package.json这个文件，里面详细的配置了两个环境的启动过程

{
  "name": "sms_spa1",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },
  "dependencies": {
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-router": "^4.0.0",
    "@vue/cli-plugin-vuex": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  }
}

serve代表开发环境
build代表生产环境

我们可以根据这两个东西去启动项目

$ npm run serve

或

$ yarn run serve

特别注意

如果使用脚手创建项目失败的，可以在其它的电脑上面创建一个以后，然后去掉node_modules文件夹，然后复制到自己电脑，再根据自己的电脑去安装依赖就可以了npm install

目录CONTENT

Vue工程化开发