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

• 安装node.js

  官网：

• 淘宝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，运行项目。

 

 

 

 

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

 

 

测试成功！