Vue.js 安装及其环境搭建

For me or other first studying vue.js。

For Windows PC:

1.先安装node.js 安装官网最新的即可 版本应该要大于6.0版本

nodejs的官网：https://nodejs.org/en/

2.安装git Git的官网：https://git-scm.com/downloads

3.安装成功后，查看PC 命令行工具，敲击 node -v 和git --version 指令，能看到相应的版本信息，说明环境变量都已经配置成功。

4.然后使用node.js npm工具download ，但是npm工具在国内网络比较慢，所以建议走cnpm 镜像来download。

装镜像cnpm，在cmd中输入:npm install -g cnpm -registry=https://registry.npm.taobao.org 回车

5.安装成功后，使用cnpm安装vue-cli 脚手架工具，

在cmd中输入: cnpm install -g vue-cli 回车，等待安装

6.安装成功后，在PC命令行工具，敲击vue指令，能看到相应的信息，说明vue脚手架安装成功。

7.然后进入需要建project的磁盘，开始创建项目：vue init webpack xxxxx (xxxxx是你创建的项目名)

ps：第四个问题是一个选择，你可以通过上下箭头来选择，一般选择第一个

后面的问题都是根据需要来回答yes or no vue-router 路由插件 ESLint 代码检查工具 unit test 单元测试 nightwatch 测试框架

做完这一步，已经出现vuedemo2文件夹，这个就是创建的项目。

8.然后进入创建的vuedemo2目录，敲击指令cnpm install 下载一些依赖。

9.然后将项目跑起来。

10.项目跑起来后，会提示如下：

11.然后访问 http://localhost:8080

build：最终发布的代码的存放位置。

config：配置路径、端口号等一些信息，我们刚开始学习的时候选择默认配置。

node_modules：npm 加载的项目所需要的各种依赖模块。

src：这里是我们开发的主要目录（源码），基本上要做的事情都在这个目录里面，
里面包含了几个目录及文件：

assets:放置一些图片，如logo等

components:目录里放的是一个个的组件文件

router/index.js：配置路由的地方

App.vue：项目入口组件（跟组件），我们也可以将组件写这里，而不使用components目录。
主要作用就是将我们自己定义的组件通过它与页面建立联系进行渲染，
面的必不可少。

main.js ：项目的核心文件（整个项目的入口）引入依赖包、默认页面样式等。

static：静态资源目录，如图片、字体等。

test：初始测试目录，可删除

.XXXX文件：配置文件。

index.html：html单页面的入口页面，可以添加一些meta信息或者同统计代码啥的或页面的重置样式等。

package.json：项目配置信息文件/所依赖的开发包的版本信息及所依赖的插件信息。

README.md：项目的说明文件。

webpack.config.js：webpack的配置文件，把.vue的文件打包成浏览器能读懂的文件。

.babelrc:是检测es6语法的文件的配置

.getignore:忽略文件的配置（比如模拟本地数据mock不让他在get提交/打包上线的时候忽略不使用可在这里配置）

.postcssrc.js:前缀的配置

=================================
vue : 无法将“vue”项识别为 cmdlet、函数、脚本文件或可运行程序的名称。请检查名称的拼写，如果包括路径，请确保路径正确，然后再试一次。

或者：

vue不是内部或外部命令…

表示系统没有找到 vue.cmd 的地址，需要将地址加入到环境变量。

方法：#
如果安装 nodejs 的时候没有修改默认安装位置，在 c 盘里搜索 vue.cmd；如果有修改安装位置，在修改后的盘符里搜索；也可以全局搜索 ：

右键选择“打开文件所在目录”，将该目录添加至系统环境变量path中：


使用你的命令即可。

问题
安装cnpm，在vsCode里终端运行cnpm -v时，报错：

解决方法

以管理员身份运行vs code,在vs code里打开终端

在终端执行：get-ExecutionPolicy，显示Restricted（禁止状态）

更新Powershell策略，在终端执行：set-ExecutionPolicy RemoteSigned

再次查询策略状态，在终端执行：get-ExecutionPolicy，显示RemoteSigned

重新输入 cnpm -v 问题成功解决

三、Vue项目搭建

1. 使用vue命令，快速创建vue项目

使用cd命令，定位到准备新建项目的目录中，然后使用如下命令创建项目(XXX是项目文件夹名称，会自动生成)

vue init webpack XXX
　　　　

说明： Project name：项目名称，默认是上面命令创建的文件夹名称，可修改（注意项目名称必须全部小写，不能有特殊符号，否则会提示error）

Project description（项目说明）、Author（作者）、Vue build（Vue项目构建方式）：默认即可，直接回车下一步

Install vue-router：是否安装路由配置（默认Yes，可选否后续自己配置路由，我不会配置，所以就是默认Y）

Use ESLint to lint your code：是否使用ESLint规范来进行编码（建议No，ESLint编码很严格，一个空格都可能报错）

Set up unit tests：是否设置单元测试（默认Yes，我不太懂，所以就默认了）

Pick a test runner：选择测试运行程序（默认jest，不懂，直接默认）

Setup e2e tests with Nightwatch：是否我用e2e测试（默认Yes，不懂，直接默认）

Should we run npm install for you after the project has been created? (recommended)：项目创建后是否直接运行npm install命令（虽然提示说是推荐，但是不建议，因为比较慢，后续我们可以直接使用 cnpm install 命令）

按照上述，项目就被创建好了，可以在目录下看到新创建的项目my_frist_vue

2.安装项目依赖项，并运行项目

使用cnpm install 命令，直接安装依赖项，安装完成后，在项目目录下，会出现一个node_modules依赖包文件夹

执行“cnpm run dev”命令，就会自动打包，生成项目，在浏览器中输入“http://localhost:8080”查看