vue-cli项目搭建

vue

依赖环境：node npm / cnpm

搭建vue-cli项目共分六大步骤：

1. npm install vue-cli -g

如果电脑上全局安装过vue-cli，就可以省去这一步了。

  • -g全局安装

  • 如果安装报错或长时间安装不上，可以切换淘宝镜像（cnpm即可）

  • 输入vue -V查看vue-cli的版本号。

2. vue init webpack <project-name>

  • init:初始化项目，这里直接用webpack模板即可。

  • <project-name> : 项目名称

举个栗子：vue init webpack vueclitest

  1. Project name :项目名称 ，如果不需要更改直接回车就可以了。注意：这
    里不能使用大写，所以我把名称改成了vueclitest
  2. Project description:项目描述，默认为A Vue.js project,直接回车，不用编写。
  3. Author：作者，如果你有配置git的作者，他会读取。
  4. Install vue-router? 是否安装vue的路由插件，我们这里需要安装，所以选择Y
  5. Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。我们这里不需要输入n，如果你是大型团队开发，最好是进行配置。
  6. setup unit tests with Karma + Mocha? 是否需要安装单元测试工具Karma+Mocha，我们这里不需要，所以输入n。
  7. Setup e2e tests with Nightwatch?是否安装e2e来进行用户行为模拟测试，我们这里不需要，所以输入n。

3. cd vueclitest 进入项目

4. npm install 安装依赖

5. npm run dev 启动服务

正式开发之前需要下载一些插件以助我们更好的开发。

element-ui npm install element-ui --save

less npm install less less-loader --save

vue-resource npm install vue-resource --save

vuex npm install vuex --save

调试工具：vue Devtools

一些网址：
vue-cli

vue-router

vuex

vue-resource

element-ui

6. npm run build 项目开发完成后打包

文章目录
  1. 1. vue
    1. 1.1. 依赖环境：node npm / cnpm
    2. 1.2. 1. npm install vue-cli -g
    3. 1.3. 2. vue init webpack <project-name>
    4. 1.4. 3. cd vueclitest 进入项目
    5. 1.5. 4. npm install 安装依赖
    6. 1.6. 5. npm run dev 启动服务
      1. 1.6.1. 正式开发之前需要下载一些插件以助我们更好的开发。
    7. 1.7. 6. npm run build 项目开发完成后打包
|