[vue学习]快速搭建一个项目

• 安装node.js

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

• 淘宝NPM镜像（npm是外网，用国内代理下载安装贼快）

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

• 全局安装 vue-cli

  $ cnpm install --global vue-cli

• 建立一个基于 webpack 模板的新项目

  $ vue init webpack my-project

• 在命令行输出以上的命令后，出现一些项目的初始选项，简单翻译以下，根据项目需求配置

 ? Project name my-project  // 项目名称
 ? Project description A Vue.js project // 项目描述
 ? Author runoob // 做者
 ? Vue build standalone // 项目名称
 ? Use ESLint to lint your code? Yes // 是否使用ES规范
 ? Pick an ESLint preset Standard // 选择ESLint预设标准
 ? Setup unit tests with Karma + Mocha? Yes // 使用Karma + Mocha设置单元测试
 ? Setup e2e tests with Nightwatch? Yes // 用夜表设置e2e测试

项目建立好以后，进入项目文件夹根目录的终端

输入如下指令

• 安装依赖

  $ npm install

• 启动服务

  VUE@2.x：

  $ npm run dev

  VUE@3.x：

  $ npm run serve

 

除了这种方法，还能够使用编译器一键建立项目

例如：我使用的是Webstorm

新建项目，选择Vue.js（以Vue@2.x为例），接下来选择项目位置、版本等等，一切准备好以后点击NEXT进行建立。

 

接下来一样须要进行一些初始配置，是否使用ESlint、是否安装路由等等......

完成以后进入项目

最后点击左下角的终端（Terminal），输入npm install安装初始依赖，启动项目和上面的同样，再也不赘述！

输入npm run dev，运行项目。

 

 

 

 

打开浏览器输入项目挂载地址

 

 

测试成功！