Vue之创建项目
一、介绍
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统,提供:
- 通过
@vue/cli
实现的交互式的项目脚手架。 - 通过
@vue/cli
+@vue/cli-service-global
实现的零配置原型开发。 - 一个运行时依赖 (
@vue/cli-service
),该依赖:- 可升级;
- 基于 webpack 构建,并带有合理的默认配置;
- 可以通过项目内的配置文件进行配置;
- 可以通过插件进行扩展。
- 一个丰富的官方插件集合,集成了前端生态中最好的工具。
- 一套完全图形化的创建和管理 Vue.js 项目的用户界面。
Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接,这样你可以专注在撰写应用上,而不必花好几天去纠结配置的问题。与此同时,它也为每个工具提供了调整配置的灵活性,无需 eject。
目前存在2.x和3.x两个版本,在创建项目时略有差异,下述步骤中会提及。
二、安装
1、需要先安装node.js
node -v查看安装版本
npm -v 查看版本
2、配置两个目录,指定「全局模块的安装目录」、「缓存目录」:
npm config set prefix "D:\nodejs\node_global",将来全局安装的东西就会跑到这个文件夹的node_modules文件夹里面去了。
npm config set cache "D:\nodejs\node_cache"
3、安装淘宝镜像cnpm,代替npm(其实对于安装vue-cli,使用npm命令和cnpm命令都是可以的,使用npm安装的比较慢,而且很可能会因为网络问题而出错,所以还是觉得使用cnpm稳一点。)
npm install cnpm -g --registry=https://registry.npm.taobao.org
如果你发现你安装成功了,使用cnpm却发现找不到命令,那么就是你的环境变量有问题,在环境变量里面的path添加你node的安装路径就行,比如";C:\Program Files\nodejs\node_modules"
可以通过设置默认地址,npm统一从淘宝镜像下载:
npm config set registry https://registry.npm.taobao.org
这一条设置解决node-sass安装失败的问题
npm config set sass-binary-site https://npm.taobao.org/mirrors/node-sass
4、安装vue-cli
cnpm install -g vue-cli :-g表示安装到global全局目录去,2.x
vue -V查看版本
cnpm install -g @vue/cli :安装最新版本,3.x
5、安装vue-router
npm install vue-router -g
注:
-g 全局安装
-S --save,安装包信息会添加到dependences(生产阶段的依赖)
-D --save--dev,安装包信息会添加到devdependences(开发阶段的依赖),通常使用
i install的缩写,注意没有-
三、2.x版本创建项目
需要在相应项目的文件夹下操作
1、通过cd命令进入你想放置项目的文件夹,在命令提示窗口执行创建vue-cli工程项目的命令:
vue init webpack
注:
vue create 是vue-cli3.x的初始化方式,目前模板是固定的,模板选项可自由配置,创建出来的是vue-cli3的项目,与cue-cli2项目结构不同,配置方法不同,具体配置方法参考官方文档。
vue init 是vue-cli2.x的初始化方式,可以使用github上面的一些模板来初始化项目,webpack是官方推荐的标准模板名。vue-cli2.x项目向3.x迁移只需要把static目录复制到public目录下,老项目的src目录覆盖3.x的src目录(如果修改了配置,可以查看文档,用cli3的方法进行配置)。
2、确认创建项目后,还需输入一下项目名称、项目描述、作者、打包方式、是否使用ESLint规范代码等等。
建议安装路由和ESLint
3、安装顺利执行后会,生成如下文件目录
4、生成文件目录后,使用 cnpm 安装依赖:
cnpm install
5、最后需要执行命令: npm run dev 来启动项目,启动完成后会自动弹出默认网页:
注:如果未自动弹出,找到生成的文件夹里的config/index.js文件,打开把 autoOpenBrowser: false,的false改成true
6、打包
npm run build
下图为打包生成的dist文件夹,其中index.html为入口文件:
这时,打开了index.html文件,发现网页一片空白,打开F12发现console报了几个错误,状态码为404
这是因为引用资源的路径问题,我们只要在下图的地方修改一下再打包就可以了。
需要修改的文件在项目目录下的config文件夹里的index.js文件
中
改完后,重新执行npm run build,成功。
四、3.x版本创建项目
vue create my-project # OR vue ui
选择之后会出现如下界面:
选择配置,看个人项目需求
注意,空格键是选中与取消,A键是全选
Babel —— ES6转换器
这个是解析我们es6的代码的,因为对于一些低版本的ie浏览器,还不能识别es6代码,那么vue里面好多要去写es6的代码,这个时候我们就可以用babel这个工具将es6的代码转译成浏览器能识别的代码。
TypeScript —— 使用JS的超类语言TS
Progressive Web App Support —— PWA单页应用
Router —— 使用路由管理器
Vuex —— 使用 vue 状态管理器
CSS Pre-processors —— CSS预处理
Linter / Formatter —— Eslint 安装
Unit Testing —— 单元测试
E2E Testing —— 单元测试
可以根据自己的需求,选择配置
注意:
1、使用vue-cli3.0搭建项目比之前更简洁,没有了build和config文件夹。
vue-cli3的一些服务配置都迁移到CLI Service里面了,对于一些基础配置和一些扩展配置需要在根目录新建一个vue.config.js文件进行配置
module.exports = { // 选项... }
2、基本路径
baseUrl从 Vue CLI 3.3 起已弃用使用publicPath来替代。
在开发环境下,如果想把开发服务器架设在根路径,可以使用一个条件式的值
module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/production-sub-path/' : '/' }
3、构建输出目录(打包位置)
outputDir
当运行 vue-cli-service build 时生成的生产环境构建文件的目录
module.exports = { outputDir: 'dist', }
4、静态资源目录
assetsDir
放置生成的静态资源 (js、css、img、fonts) 的目录
module.exports = { assetsDir: 'assets', }
5、eslint代码检测
是否开启eslint保存检测,有效值:ture | false | 'error'
设置为 true
时,eslint-loader
会将 lint 错误输出为编译警告。默认情况下,警告仅仅会被输出到命令行,且不会使得编译失败
希望让 lint 错误在开发时直接显示在浏览器中,可以使用 lintOnSave: 'error'
。这会强制 eslint-loader
将 lint 错误输出为编译错误
webpack-dev-server 相关配置
devServer: { open: true,//设置自动打开 port: 1880,//设置端口 proxy: { //设置代理 '/axios': { target: 'http://101.15.22.98', changeOrigin: true, secure: false, //如果是http接口,需要配置该参数 pathRewrite: { '^/axios': '' } } } } }
module.exports = { // 部署应用时的基本 URL publicPath: process.env.NODE_ENV === 'production' ? '192.168.60.110:8080' : '192.168.60.110:8080', // build时构建文件的目录 构建时传入 --no-clean 可关闭该行为 outputDir: 'dist', // build时放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录 assetsDir: '', // 指定生成的 index.html 的输出路径 (相对于 outputDir)。也可以是一个绝对路径。 indexPath: 'index.html', // 默认在生成的静态资源文件名中包含hash以控制缓存 filenameHashing: true, // 构建多页面应用,页面的配置 pages: { index: { // page 的入口 entry: 'src/index/main.js', // 模板来源 template: 'public/index.html', // 在 dist/index.html 的输出 filename: 'index.html', // 当使用 title 选项时, // template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title> title: 'Index Page', // 在这个页面中包含的块,默认情况下会包含 // 提取出来的通用 chunk 和 vendor chunk。 chunks: ['chunk-vendors', 'chunk-common', 'index'] }, // 当使用只有入口的字符串格式时, // 模板会被推导为 `public/subpage.html` // 并且如果找不到的话,就回退到 `public/index.html`。 // 输出文件名会被推导为 `subpage.html`。 subpage: 'src/subpage/main.js' }, // 是否在开发环境下通过 eslint-loader 在每次保存时 lint 代码 (在生产构建时禁用 eslint-loader) lintOnSave: process.env.NODE_ENV !== 'production', // 是否使用包含运行时编译器的 Vue 构建版本 runtimeCompiler: false, // Babel 显式转译列表 transpileDependencies: [], // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建 productionSourceMap: true, // 设置生成的 HTML 中 <link rel="stylesheet"> 和 <script> 标签的 crossorigin 属性(注:仅影响构建时注入的标签) crossorigin: '', // 在生成的 HTML 中的 <link rel="stylesheet"> 和 <script> 标签上启用 Subresource Integrity (SRI) integrity: false, // 如果这个值是一个对象,则会通过 webpack-merge 合并到最终的配置中 // 如果你需要基于环境有条件地配置行为,或者想要直接修改配置,那就换成一个函数 (该函数会在环境变量被设置之后懒执行)。该方法的第一个参数会收到已经解析好的配置。在函数内,你可以直接修改配置,或者返回一个将会被合并的对象 configureWebpack: {}, // 对内部的 webpack 配置(比如修改、增加Loader选项)(链式操作) chainWebpack: () =>{ }, // css的处理 css: { // 当为true时,css文件名可省略 module 默认为 false modules: true, // 是否将组件中的 CSS 提取至一个独立的 CSS 文件中,当作为一个库构建时,你也可以将其设置为 false 免得用户自己导入 CSS // 默认生产环境下是 true,开发环境下是 false extract: false, // 是否为 CSS 开启 source map。设置为 true 之后可能会影响构建的性能 sourceMap: false, //向 CSS 相关的 loader 传递选项(支持 css-loader postcss-loader sass-loader less-loader stylus-loader) loaderOptions: { css: {}, less: {} } }, // 所有 webpack-dev-server 的选项都支持 devServer: {}, // 是否为 Babel 或 TypeScript 使用 thread-loader parallel: require('os').cpus().length > 1, // 向 PWA 插件传递选项 pwa: {}, // 可以用来传递任何第三方插件选项 pluginOptions: {} }