在利用vue-cli脚手架搭建vue集成环境之前&＃xff0c;我们需要先安装nodejs的环境。如果在cmd中输入node --version和npm --version出现如下的版本信息&＃xff0c;就说明安装已经成功了。
1.全局安装 vue-cli&＃xff1a; npm install --global vue-cli
关于这些选项的含义可以参考这篇博客的内容&＃xff1a;https://www.jianshu.com/p/2769efeaa10a
我具体摘抄出来给大家解释一下&＃xff1a;
vue init webpack vuetest
Test是项目名称&＃xff0c;这个名字自己随便取。
命令输入后&＃xff0c;会进入安装阶段&＃xff0c;需要用户输入一些信息
Project name (vuetest) 项目名称&＃xff0c;可以自己指定&＃xff0c;也可直接回车&＃xff0c;按照括号中默认名字&＃xff08;注意这里的名字不能有大写字母&＃xff0c;如果有会报错Sorry, name can no longer contain capital letters&＃xff09;&＃xff0c;阮一峰老师博客为什么文件名要小写 &＃xff0c;可以参考一下。
Project description (A Vue.js project) 项目描述&＃xff0c;也可直接点击回车&＃xff0c;使用默认名字
Author (........) 作者&＃xff0c;不用说了&＃xff0c;你想输什么就输什么吧
接下来会让用户选择
Runtime &＃43; Compiler: recommended for most users 运行加编译&＃xff0c;既然已经说了推荐&＃xff0c;就选它了
Runtime-only: about 6KB lighter min&＃43;gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 仅运行时&＃xff0c;已经有推荐了就选择第一个了
Install vue-router? (Y/n) 是否安装vue-router&＃xff0c;这是官方的路由&＃xff0c;大多数情况下都使用&＃xff0c;不过我的第一个项目中的路由是自己写的&＃xff0c;没有使用到官方路由&＃xff0c;因为有特殊需求&＃xff0c;也因为比较早&＃xff0c;官方尚未成熟&＃xff0c;vue-router官网 。这里就输入“y”后回车即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代码&＃xff0c;ESLint是个代码风格管理工具&＃xff0c;是用来统一代码风格的&＃xff0c;并不会影响整体的运行&＃xff0c;这也是为了多人协作&＃xff0c;新手就不用了&＃xff0c;一般项目中都会使用。ESLint官网
接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设&＃xff0c;编写vue项目时的代码风格&＃xff0c;因为我选择了使用ESLint
Standard (https://github.com/feross/standard) 标准&＃xff0c;有些看不明白&＃xff0c;什么标准呢&＃xff0c;去给提示的standardgithub地址看一下&＃xff0c; 原来时js的标准风格
AirBNB (https://github.com/airbnb/Javascript) Javascript最合理的方法&＃xff0c;这个github地址说的是Javascript最合理的方法
none (configure it yourself) 这个不用说&＃xff0c;自己定义风格
具体选择哪个因人而异吧 &＃xff0c;我选择标准风格
Setup unit tests with Karma &＃43; Mocha? (Y/n) 是否安装单元测试&＃xff0c;我选择安装
Setup e2e tests with Nightwatch(Y/n)? 是否安装e2e测试 &＃xff0c;我选择安装
3.进入webpack项目中更新工程依赖&＃xff0c;因为现在前端项目会有很多依赖&＃xff1a;npm install
&＃xff08;这边需要注意的是&＃xff1a;命令框得是由管理员启动的才可以&＃xff01;&＃xff01;&＃xff01;&＃xff09;
4.运行webpack项目&＃xff1a;npm run dev
5.webpack项目打包&＃xff1a;npm run build .
京公网安备 11010802041100号