vue-cli脚手架构建Vue项目及相关配置

时间:2021-01-02 19:38:13

Vue是移动端H5开发比较流行的一个MVVM框架,它是以数据驱动的,不需要像jQuery那样操作DOM,而是通过将DOM和数据绑定,利用Object.defineProperty中的setter/getter代理数据,监控对数据的变化,当数据改变时更新DOM。

Vue项目构建有两种方式,构建大型应用时推荐使用命令行工具构建:

1、直接<script>标签引入

2、vue-cli命令行工具

vue-cli是Vue.js的脚手架,用于自动生成Vue模板工程。

vue-cli使用之前需要安装vue

>npm install vue

##全局安装vue-cli

>npm install -g vue-cli
##创建一个基于“webpack”模板的项目

>vue init webpack(webpack-simple) jm_vue

##进入项目

>cd jm_vue

##安装依赖

>npm install

##安装vue路由模块vue-router和网络请求模块vue-resource

>npm install vue-router vue-resource --save-dev

##安装css依赖

>npm install style-loader --save-dev
>npm install css-loader --save-dev
>npm install file-loader --save-dev

##安装less依赖

>npm install less less-loader --save-dev

##运行项目

>npm run dev

##打包项目

>npm run build

生成后的目录结构如下

vue-cli脚手架构建Vue项目及相关配置


vue-cli构建的项目在配置有些小瑕疵,比如打包后的js、css文件路径不对,路由懒加载打包后的文件名以ID标识,可读性差,可以通过修改配置文件进行优化。

1、配置启动入口

vue-cli脚手架构建Vue项目及相关配置

2、main.js配置组件路由

vue-cli脚手架构建Vue项目及相关配置

3、配置自定义过滤器

vue-cli脚手架构建Vue项目及相关配置

4、如果采用require.ensure()加载模块(路由懒加载),最终会被打成一个js文件,默认以id命名,可读性比较差,可以改为以模块的名称命名

改名前配置:(在webpack.prod.conf.js文件中修改chunkFilename)

vue-cli脚手架构建Vue项目及相关配置

改名后配置:

vue-cli脚手架构建Vue项目及相关配置

5、build打包不生成map文件(修改index.js文件中的productionSourceMap为false)

vue-cli脚手架构建Vue项目及相关配置

6、build打包文件名去掉hash(修改webpack.prod.conf.js文件中filename)

vue-cli脚手架构建Vue项目及相关配置

vue-cli脚手架构建Vue项目及相关配置

vue-cli脚手架构建Vue项目及相关配置

7、build打包时引用的css和js的为绝对路径,会出现找不到路径的问题,需要在配置文件index.js里修改生成文件的路径

vue-cli脚手架构建Vue项目及相关配置

vue-cli脚手架构建Vue项目及相关配置