vue搭建项目的步骤详解

1.项目环境搭建

安装node.js

官网下载nodejs

官方网站：https://nodejs.org/en/

具体详细安装过程，大家不懂的可以百度一下，node.js自带npm包管理工具，使用npm可以使用安装项目中的组件，终端输入命令行，可以检查node版本

node --version

安装vue-cli 脚手架工具

npm install -g vue-cli

进行vue-cli全局安装

输入vue -v查看当前安装vue的版本号

vue -v

另外，由于npm的官方镜像服务器是在国外，国内没有进行科学上网的同学安装依赖包时，有时候速度会非常慢。因此，可采用淘宝的npm镜像，在命令行工具输入：

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

以后就可以使用cnpm来代替npm了。因此，如果已经安装了淘宝的npm镜像工具，vue-cli可以这样安装：

cnpm install -g vue-cli

项目环境基本已经配置好了，下面开始搭建项目

2.项目的搭建

基于webpack模板搭建vue项目

命令行输入

vue init webpack my-project

其中my-project是项目名称，根据自己的项目定义就行，cd my-project 就是进入我的项目（my-project），按下回车，你会在终端中看到下面一大串：

• Project name：项目名称
• Project description：项目描述
• Author：作者
• Vue build：运行时与编译
• Install vue-router?：是否安装路由？
• Use ESLint to lint your code?：是否进行代码检测？
• Setup unit tests with Karma + Mocha?：是否进行单元测试？
• Setup e2e tests with Nightwatch?：是否进行端对端测试？

输入下面命令行，项目启动成功

my-project
npm run dev

出现上图，启动成功！完美！！