用vue-cli搭建一个vue项目

参考文章 https://segmentfault.com/a/1190000009871504

1.安装node

node.js官网：https://nodejs.org/en/

在node.js官网下载安装node，安装过程很简单，一路下一步即可。
安装完成后，使用Win+R打开运行程序，输入cmd，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。

2.安装cnpm(可不安装)

使用npm下载依赖时，由于是从国外的网站上下载内容，所以可能经常会出现不稳定的情况，所以需要下载cnpm代替npm，cnpm是国内淘宝的做的，在国内使用稳定。

安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

安装完成如下图，完成之后，我们就可以用cnpm代替npm来安装依赖包了。如果想进一步了解cnpm，淘宝npm镜像官网（输入cnpm -v 如出现版本号 则安装成功）

3.安装vue-cli脚手架构建工具

在命令行输入：

cnpm install -g vue-cli

安装完成如下图，准备工作已经做完，接下来使用vue-cli构建项目（输入 vue -V V要大写 如出现版本号 则安装成功）

4.使用vue-cli构建项目

构建项目，首先要选定项目目录，然后用命令行进入选定的项目目录。这里我选择d盘下的xu文件夹，我们需要进入d盘，在cd到xu这个文件夹下。

在命令行输入：

vue init webpack xu_vue

解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。这里的xu_vue是自定义的项目名称，命令执行后，会在当前目录生成一个以该名称命名的项目文件夹。

如不想填写直接回车就会默认填写。

如何自己安装依赖，首先要cd到项目文件（以此项目为例 输入cd xu_vue）然后在命令行输入：

npm install
如安装淘宝镜像 推荐使用 cnpm install

安装完成之后，会在项目文件（xu_vue）下多出node_modules文件夹，这里放的就是所有依赖的模块。下图为完成项目文件夹

5.运行项目

在项目目录下（xu_vue），输入命令：

npm run dev

会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果

这里简单介绍下 npm run dev 命令，其中的“run”对应的是package.json文件中，scripts字段中的dev，也就是 node build/dev-server.js命令的一个快捷方式。

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

如果看到这个页面，说明项目运行成功了。

在命令行按下ctrl+c 然后输入y 即可停止项目，如想再次启动 npm run dev（一定要cd到项目目录下运行）。

6.每个文件代表的意思

图片引用地址：https://www.jb51.net/article/146689.htm

补充

1.安装Vuex

npm install vuex --save

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension，提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。

–save-dev 与 --save 的区别
–save 安装包信息将加入到dependencies（生产阶段的依赖）
–save-dev 安装包信息将加入到devDependencies（开发阶段的依赖），所以开发阶段一般使用它