Vue开发环境搭建步骤
1、安装node http://www.nodejs.com.cn/ 一般安装在根目录下，直接下一步下一步安装即可。如何检测安装完毕 node -v
2、第二步：安装vue-cli脚手架 npm install -g @vue/cli ，查看安装版本 vue --version
3、第三步：项目创建 vue create 项目名字(英文)选择vue2.0
4、vue项目打开方式
第
一步：查看
node_modules
包是否存在
node_modules
包存储的是依赖包。如果没有在项目
下
，
打
开命令行
npm
install/i
第
二步：如果
node_modules
包存在，直接在项目下打开命令行
npm run serve(
不一定是
serve,
看
package.json
中的
scripts
有可能
serve dev
)
一、安装node.js
检查环境变量配置
安装完成后打开
cmd
工具并执行
node -v
命令，将有如下提示：
接着执行npm -v命令，将有如下提示：
如果没有版本号出现请检查是否将
nodejs
添加进环境变量
设置镜像源
在对
nodejs
的
npm
工具设置国内的镜像源以便于提高资源的下载速度，如下：
执行以下命令安装cnpm工具用来代替npm工具：
npm install -g cnpm -- https://registry.npmmirror.com
或者将npm源设置为淘宝镜像
npm config set registry https://registry.npmmirror.com
执行完成后执行以下命令
npm config get registry设置成功后将会有如图效果
二、安装vue-cli
设置好镜像源之后我们需要安装一个
vue
的脚手架工具（
vue-cli
）
执行以下命令安装vue-cli版本
npm install -g @vue/cli 或 cnpm install -g @vue/cli
安装之后你就可以在命令行中使用vue命令，你可以使用以下命令来检查vue-cli版本安装是否正确
vue --version
三、使用vue-cli创建vue项目
安装好vue-cli之后我们在一个空目录下执行以下命令：
vue create hello-vue //这里的hello-vue是项目名，可以自己定义
执行之后会有如下界面
回车后会有以下界面
选择依赖
将依赖项的配置放置在package.json中
是否将其保存为将来项目的预设？
四、打开项目及运行
下载VScode或WebStorm开发工具
VSCode安装好后按Ctrl+Shift+X打开扩展中心，搜索Vetur安装扩展
打
开项目
Vue项目文件结构
使用VScode从项目根目录打开
main.js
main.js
作为应用程序的入口文件具有以下特征
1.
实例化
Vue
2. 放置项目中经常会用到的插件和CSS样式
3.
存储全局变量
。。。
package.json
在每个前端项目中，都有
package.json
文件，它是项目的配置文件，常见的配置有配置项目启动、打包命令，声明依赖包等。
package.json
文件是一个
JSON
对象，该对象的每一个成员就是当前项目的一项设置。
package.json
作为前端的大管家，到底有哪些配置和我们的日常开发密切相关？下面就来仔细剖析一下这个文件。
当我们搭建一个新项目时，往往脚手架就帮我们初始化好了一个
package.json
配置文件，它位于项目的根目录中。
•
scripts
指定了运行脚本命令的 npm 命令行缩写
如下列设置中指定了 npm run serve 所要执行的命令为 vue-cli-service serve【 即 npm run + 快捷名 】
指定了运行脚本命令的 npm 命令行缩写
如下列设置中指定了 npm run serve 所要执行的命令为 vue-cli-service serve【 即 npm run + 快捷名 】
"scripts":
{
"serve": "vue-cli-service serve",
"build": "vue-cli-service build“
}Vscode菜单->终端->新建终端
dependencies —
指定了项目运行所依赖的模
块
devDependencies
—
指定了项目开发所需要的模
块
browserslist —
用以兼容各种浏览
器
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]运行vue-cli创建vue项目
安装完成后键入如下命令运行刚刚创建的vue项目
cd hello-vue
npm run serve
打开浏览器输入http://localhost:8080将会看到我们刚刚创建的Vue项目
