vue安装步骤（详细版）

一、安装node.js 环境

1.安装完成后验证node.js 是否安装成功

2.环境变量配置

更改npm的全局安装路径（在cmd中执行）
命令行输入：
npm config set prefix “D:\nodejs\node_global”

命令行输入：
npm config set cache “D:\nodejs\node_cache”

查看npm的本地仓库:
npm list -global

！！配置环境变量

系统变量：

用户变量：

二、安装淘宝镜像(cnpm)

安装命令: npm install cnpm -g --registry=https://registry.npm.taobao.org

安装成功！！

三、安装全局vue

执行命令:npm install -g vue

安装成功！！

四、安装 vue脚手架

1.安装vue.js

安装命令：cnpm install vue -g/npm install @vue/cli –g(新版本)

2.安装webpack模板

安装命令：npm install webpack -g

webpack 4x以上，webpack将命令相关的内容都放到了webpack-cli，
所以还需要安装webpack-cli：npm install --global webpack-cli

安装成功！！

3.安装脚手架vue-cli

安装命令：npm install vue-cli -g

用这个命令来检查其版本是否正确：vue --version或vue -V

顺手安装上vue-router

安装命令：npm install -g vue-router

五、创建vue项目（初始化一个vue项目工程）

ps：需要安装git

vue init webpack 项目名/vue create 项目名(新版本)[解决乱码【chcp 65001】

1.vue init webpack 项目名

安装依赖（例如echarts、axios）
npm install echarts -S
npm install vue-axios -S

最后结果如下，项目初始化成功

2、按提示代码进入到项目目录下并运行npm run dev

!!）npm run dev启动过程

在npm run dev的时候，首先会去项目的package.json文件里找scripts 里找对应的 dev ，然后执行 dev 的命令。

npm run dev 执行的就是webpack-dev-server --inline --progress --config build/webpack.dev.conf.js命令。

webpack.dev.conf文件通过merge引用了webpack.base.conf.js文件(第七行）。

在webpack.base.conf.js文件中调用了./src/main.js

main.js用到了一个html元素#app，并创建了一个vue

创建的vue会插入到webpack.dev.conf.js配置中HtmlWebpackPlugin配置的文件中

template指定了index.html作为输出文件的模板文件。

main.js中配置了router-view，router-view会加载HelloWorld.vue并插入到index.html的中，在main.js文件中引用了App.vue和router。

//main.js

//router/index.js

router/index.js文件中的路由配置，当访问根目录时就返回@/components/Hello.vue里的内容。

//App.Vue

App.vue里有个router-view元素，所有通过router返回的vue都会填充在这个元素里面。

所以最后看到的页面是由App.vue和Hello.vue两个模块组成的。

最终结果：

按提示打开地址http://localhost:8081， 打开网址如图所示

结束项目运行：ctrl+c，选择Y即可停止项目的运行。

项目打包发布(npm run build)

3.vue create 项目名(3.0版本)

配置成功

运行项目(npm run serve)

按提示打开地址http://localhost:8081， 打开网址如图所示

六、（google）添加vue-devtools

七、开发工具用VS查看vue代码

1、在VS code 中启动项目

创建完项目后，首先用VS打开项目所在的文件夹，右击资源管理器——在集成终端中打开

在下面的终端窗口命令行输入 npm run serve启动，编译成功后会自动打开浏览器

八、vue项目结构

1、build：构建脚本目录

1）build.js ==> 生产环境构建脚本；
2）check-versions.js ==> 检查npm，node.js版本；
3）utils.js ==> 构建相关工具方法；
4）vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加 前缀；
5）webpack.base.conf.js ==> webpack基本配置；
6）webpack.dev.conf.js ==> webpack开发环境配置；
7）webpack.prod.conf.js ==> webpack生产环境配置；

2、config：项目配置

1）dev.env.js ==> 开发环境变量；
2）index.js ==> 项目配置文件；
3）prod.env.js ==> 生产环境变量；

3、node_modules：npm 加载的项目依赖模块

4、src：这里是我们要开发的目录，基本上要做的事情都在这个目录里。

里面包含了几个目录及文件：

1）assets：资源目录，放置一些图片或者公共js、公共css。但是因为它们属于代码目录下，所以可以用 webpack 来操作和处理。意思就是你可以使用一些预处理比如 Sass/SCSS 或者 Stylus。
2）components：用来存放自定义组件的目录，目前里面会有一个示例组件。
3）router：前端路由目录，我们需要配置的路由路径写在index.js里面；
4）App.vue：根组件；这是 Vue 应用的根节点组件，往下看可以了解更多关注 Vue 组件的信息。
5）main.js：应用的入口文件。主要是引入vue框架，根组件及路由设置，并且定义vue实例，即初始化 Vue 应用并且制定将应用挂载到index.html 文件中的哪个 HTML 元素上。通常还会做一些注册全局组件或者添额外的 Vue 库的操作。

5、static：静态资源目录，如图片、字体等。不会被webpack构建

6、index.html：首页入口文件，可以添加一些 meta 信息等。

这是应用的模板文件，Vue 应用会通过这个 HTML 页面来运行，也可以通过 lodash 这种模板语法在这个文件里插值。 注意：这个不是负责管理页面最终展示的模板，而是管理 Vue 应用之外的静态 HTML 文件，一般只有在用到一些高级功能的时候才会修改这个文件。

7、package.json：npm包配置文件，定义了项目的npm脚本，依赖包等信息

8、README.md：项目的说明文档，markdown 格式

9、.xxxx文件：这些是一些配置文件，包括语法配置，git配置等

1）.babelrc:babel编译参数
2）.editorconfig:编辑器相关的配置，代码格式
3）.eslintignore : 配置需要或略的路径，一般build、config、dist、test等目录都会配置忽略
4）.eslintrc.js : 配置代码格式风格检查规则
5）.gitignore:git上传需要忽略的文件配置
6）.postcssrc.js ：css转换工具

九、vue项目结构（新版本）

1)node_modules 所有依赖项
2)public 静态内容
1.favicon.ico 小图标
2.index.html
3)src 项目执行的主目录
1.assets 静态文件
*图片 、
*json、
*iconfont、
2.components 组件
3.router 路由配置文件
4.views 放置页面内容
5.App.vue 项目的根组件，文件中可以写路由出口和路由链接 ，在 main.js里引入
6.main.js 项目的主入口文件
4).gitignore git的忽略文件
5)babel.config.js 设置 babel 的配置的
6)package.json 所有依赖包配置文件
7)README.md 项目文档

*iconfont、
2.components 组件
3.router 路由配置文件
4.views 放置页面内容
5.App.vue 项目的根组件，文件中可以写路由出口和路由链接 ，在 main.js里引入
6.main.js 项目的主入口文件
4).gitignore git的忽略文件
5)babel.config.js 设置 babel 的配置的
6)package.json 所有依赖包配置文件
7)README.md 项目文档