vue-cli快速搭建Vue脚手架（vue-cli 2.x 模板）

weixin_34090643

于 2019-05-14 13:27:00 发布

阅读量84

点赞数

原文链接：http://www.cnblogs.com/lkc9/p/10861701.html

版权

1、确保已经安装了npm 或者 yarn

　　查看是否安装了npm或yarn：在控制台输入npm -v 或 yarn -v 能看到版本号就代表已经安装

　　（注意：Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)）

2、全局安装vue脚手架工具 vue-cli

(这里安装的是vue-cli 2.X 的脚手架工具）

yarn global add vue-cli
# OR
npm install -g vue-cli

安装后，可以在控制台输入 vue --version 验证是否安装成功）

另：

　　如果要安装3.X的脚手架工具，输入命令：

yarn global add @vue/cli
# OR
npm install -g @vue/cli

//如果是用3.X的脚手架工具，还需要安装@vue/cli-init才能使用 vue init命令
yarn global add @vue/cli-init
# OR
npm install -g @vue/cli-init

3、使用vue-cli初始化项目

控制台切换到你的项目存放路径，输入：

vue init <template-name> <project-name>

<template-name> : 模板名称，vue-cli提供了5中模板：
①webpack : 一个全面的webpack+vue-loader的模板，功能包括热加载，linting,检测和CSS扩展。
②webpack-simple : 一个简单webpack+vue-loader的模板，不包含其他功能，让你快速的搭建vue的开发环境。
③browserify : 一个全面的Browserify+vueify 的模板，功能包括热加载，linting,单元检测。
④browserify-simple : 一个简单Browserify+vueify的模板，不包含其他功能，让你快速的搭建vue的开发环境。
⑤simple : 一个最简单的单页应用模板。

<project-name> : 项目名称（不能包含大写字母，否则会报错）

例：

vue init webpack my-vue

　　输入命令后，会询问一些选项：

　　　　注意：

　　　　①Use ESLint to line your code ?选择 No ----ESLint的很多规范和我们平时开发的习惯不太一致，所以这里不建议使用

　　　　②Should we run `npm install` for you after the project has been created?选择No, I will handle that myself　　----我安装的时候，选择Yes,use Yarn最后卡在了最后一步，但是选择No以后，再自己执行yarn 就成功了。。。。

4、进入到 my-vue 目录下，安装package.json 文件中的依赖包

>cd my-vue

>yarn     //强烈推荐使用yarn
或
>npm install

　　如图：

　　输入命令后等待依赖包安装完成即可

　　（注意，yarn安装自动生成的yarn.lock 存放了安装过程中的重要信息，一定要放到版本控制当中，否则多人共同开发可能会引起一些错误）

5、运行项目

　　输入以下命令：

yarn run dev
# OR
npm run dev

然后即可在浏览器中输入 localhost:8080 浏览：

6、vue项目目录说明：

├── build/                      # webpack 编译任务配置文件: 开发环境与生产环境
│   └── ...
├── config/                     
│   ├── index.js                # 项目核心配置
│   └── ...
├ ── node_module/               #项目中安装的依赖模块
   ── src/
│   ├── main.js                 # 程序入口文件
│   ├── App.vue                 # 程序入口vue组件
│   ├── components/             # 组件
│   │   └── ...
│   └── assets/                 # 资源文件夹，一般放一些静态资源文件
│       └── ...
├── static/                     # 纯静态资源 (直接拷贝到dist/static/里面)
├── test/
│   └── unit/                   # 单元测试
│   │   ├── specs/              # 测试规范
│   │   ├── index.js            # 测试入口文件
│   │   └── karma.conf.js       # 测试运行配置文件
│   └── e2e/                    # 端到端测试
│   │   ├── specs/              # 测试规范
│   │   ├── custom-assertions/  # 端到端测试自定义断言
│   │   ├── runner.js           # 运行测试的脚本
│   │   └── nightwatch.conf.js  # 运行测试的配置文件
├── .babelrc                    # babel 配置文件
├── .editorconfig               # 编辑配置文件
├── .gitignore                  # 用来过滤一些版本控制的文件，比如node_modules文件夹 
├── index.html                  # index.html 入口模板文件
└── package.json                # 项目文件，记载着一些命令和依赖还有简要的项目描述信息 
└── README.md                   #介绍自己这个项目的，可参照github上star多的项目。
build/

转载于:https://www.cnblogs.com/lkc9/p/10861701.html