目 录CONTENT

文章目录

Vue工程化开发

Administrator
2020-07-24 / 0 评论 / 0 点赞 / 13404 阅读 / 5825 字

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

填写项目的相关信息,选择包管理器为npmyarn

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

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

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

src目录结构

  1. assets静态资源目录 ,在vue开发过程当 ,我们可以把图片,CSS以及SCSS等放在里面
  2. components目录用于存放vue的组件(模块组件,也叫公共组件)
  3. router文件夹里面存放路由文件,一般情况下,里面只有一个index.js文件
  4. store文件夹里面存放vuex的状态,action以及mapper,mutation等
  5. views文件夹,存放vue的虚拟页面(Login.vue或register.vue)
  6. App.vue 项目当中的根组件,入口组件,当相于我们之前学习的<div id="app"></div>
  7. 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

0

评论区