搭建一个vue项目

搭建一个vue项目(比较完整步骤)
一、安装node环境

1、下载地址为：https://nodejs.org/en/
2、检查是否安装成功：如果输出版本号，说明我们安装node环境成功

查看node与npm的安装情况
node自带了包管理工具 npm 。
但是由于npm在国内下载的时候是很慢的，所以这里推荐一个替代npm的淘宝镜像cnpm；之后npm安装就使用cnpm！
二、安装webpack
webpack是一个构建和打包CSS，预处理CSS，编译JS和打包处理图片，甚至更多事情的工具
在安装 Webpack 前，你本地环境必须已安装nodejs。
使用 npm install webpack -g ，webpack全局安装到了本地环境中，就可以使用 webpack 命令了。

1 | cnpm install webpack -g

三、安装vue-cli脚手架
vue-cli 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上

1. 安装yarn
   yarn 对你的代码来说是一个包管理器， 你可以通过它使用全世界开发者的代码，或者分享自己的代码。

1 | cnpm i yarn -g

2. 安装vue-cli 3.0

2 | cnpm i @vue/cli -g

四、搭建项目
在搭建vue项目的时候重要的一点，想用WebStorm创建项目得安装git。否则可能出现安装不了的情况

image.png
node、vue-cli、webpack都有后，点击next下一步。
项目名字
之后一系列默认
项目描述
创建者
image.png
是否安装Vue路由
是否启用eslint检测规则
image.png
是否启用单元测试（可加可不加）
image.png
是否启用单元测试
image.png
最后一步点击next开始生成项目结构

结束后

// 进入到vue-test项目
cd vue-test
// - 启动服务
yarn serve
// - 打包编译
yarn build
// - 执行lint
yarn lint
// - 执行单元测试
yarn test:unit

使用vs_code创建

vue init webpack myProject    ---------------- 这个是那个安装vue脚手架的命令
? Project name (myProject)    ---------------- 项目名称
? Project description (A Vue.js project)     ----------------项目描述
? Author  authorName       ---------------- 项目创建者
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)  y    ----------------  是否安装Vue路由，也就是以后是spa（单页面应用需要的模块，要用输入y，不用输入n，可以在用的时候再安装）
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n   ---------------- 是否启用eslint检测规则（eslint是一个代码语法规范检查的工具，选择no就不会把语法规范功能加进webpack编译的流程里。建议选no）
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)    ---------------- 是否启用单元测试（可加可不加）
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n) y       ----------------  是否启用单元测试
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "myProject".
To get started:     ---------------- 这里说明如何启动这个服务
cd exprice        ---------------- 进入项目文件夹
npm install      ---------------- 下载依赖
npm run dev   ----------------  启动项目

关于vue项目中的package.json文件中：dependencies 与 devDependencies的区别是什么？

devDependencies下列出的模块，是我们开发时用的依赖项，像一些进行单元测试之类的包，我们用它混淆js文件，它们不会被部署到生产环境。
dependencies下的模块，则是我们生产环境中需要的依赖，即正常运行该包时所需要的依赖项。

如果执行npm install(yarn install)命令,默认会安装两种依赖。如果你只是单纯的使用这个包而不需要进行一些改动测试之类的，只安装dependencies而不安装devDependencies。

dependencies: 指定项目运行所依赖的模块，即：开发版和发布版都需要的依赖。
devDependencies:指定项目开发所需要的模块，即：开发版需要但发布版不需要，例如关于测试的、文档类的。

注意：通过“yarn add packagename”进行安装，只会安装dependencies。

如需安装devDependencies执行如下命令：
yarn add packagename --dev

npm 安转依赖的一些小操作（以eslint为例）

npm本地安装eslint

npm install eslint

安装包放在 ./node_modules 下（运行 npm 命令时所在的目录）

npm本地卸载eslint

npm uninstall eslint

npm全局安装eslint

npm install eslint-g

安装包放在 /usr/local 下或者你 node 的安装目录

npm全局卸载eslint

npm uninstall eslint-g

模块添加到dependencies

npm install eslint-S

该模块中所列举的插件属于开发环境的依赖（比如：测试或者文档框架等)

模块添加到devDependencies

npm install eslint-D

该模块中所列举的插件属于生产环境的依赖（程序正常运行需要加载的依赖）

备注（仅供参考学习）：一个开源的vue-element项目