VUE全网最详细安装教程

1.安装node.js

node.js安装教程：网址：https://www.runoob.com/nodejs/nodejs-install-setup.html

总结一下，教程里是让你去https://nodejs.org/en/download/ 下载安装一个node.js ，如下图，下载红圈这个（我是64位，32的自己看）。。下载完了以后安装就行了（可以一路点确定，安装到C盘，也可以自己选择安装到其他盘。无所谓）

2.打开命令窗口

在命令里输入: npm install -g cnpm --registry=https://registry.npm.taobao.org

3.获取到cnpm以后，我们需要升级一下，输入下面的命令

在命令里输入: cnpm install cnpm -g

4.开始安装VUE！ 

在命令里输入: cnpm install vue

5.安装vue-cli

在命令里输入: cnpm install --global vue-cli

至此VUE环境已经搭建完成！

下面开始建立个vue项目

1.找个地方放你的项目，例如E盘  ，cd..和cd 进入到E盘。

2.执行下面代码

vue init webpack "项目名称"

例如（这是让你命名项目文件夹这一步以后你的盘符下面会出现一个你自己起的名字的文件夹）：

然后出这个projectname 以后，一路点确定就行了（这是让你命名项目的名）

如果你是新手，下图红圈中是一路点回车，直接是全部yes。。后面我会解释一下这几个yes具体是什么东西。

等他自己执行，执行完成以后分别执行下面这两句代码

1.执行这个是安装

cnpm install 

2.执行这个是运行环境（后面命令窗口不小心关了直接执行这个就行了）

 

cnpm run dev

3. 成功以后命令窗口出现 让你进 loaclhost ，那就是成功了

4.进入浏览器的 loaclhost:8080     就出这个。

5. 项目运行必须要开着命令窗口。

如果不小心关了就执行最后一句代码就行。

 

附加：

附上VUE的项目目录注释（红色是重要的2个目录）

├── build --------------------------------- webpack相关配置文件

│ ├── build.js --------------------------webpack打包配置文件

│ ├── check-versions.js ------------------------------ 检查npm,nodejs版本

│ ├── dev-client.js ---------------------------------- 设置环境

│ ├── dev-server.js ---------------------------------- 创建express服务器，配置中间件，启动可热重载的服务器，用于开发项目 │ ├── utils.js --------------------------------------- 配置资源路径，配置css加载器

│ ├── vue-loader.conf.js ----------------------------- 配置css加载器等

│ ├── webpack.base.conf.js --------------------------- webpack基本配置

│ ├── webpack.dev.conf.js ---------------------------- 用于开发的webpack设置

│ ├── webpack.prod.conf.js --------------------------- 用于打包的webpack设置

├── config ---------------------------------- 配置文件

├── node_modules ----------------------------

存放依赖的目录

├── src ------------------------------------- 源码

│ ├── assets ------------------------------ 静态文件

│ ├── components -------------------------- 组件

│ ├── main.js ----------------------------- 主js

│ ├── App.vue ----------------------------- 项目入口组件

│ ├── router ------------------------------ 路由

├── package.json ---------------------------- node配置文件

├── .babelrc--------------------------------- babel配置文件

├── .editorconfig---------------------------- 编辑器配置

├── .gitignore------------------------------- 配置git可忽略的文件