快速构建vue-cli(vue脚手架)

vue-cli 是vue.js的脚手架,用于自动生成vue.js模板工程的。

 1、使用npm安装vue-cli

   需要先装好vue 和 webpack(前提是已经安装了nodejs,否则连npm都用不了)

  npm install -g vue       //全局安装vue
  npm install -g webpack   //全局安装webpack
  npm install -g vue-cli   //全局安装vue-cli

 

  注意:上面这些装过一次之后都不需要再安装了

2、使用vue-cli构建vue项目

vue init webpack my-project    //生成项目名为my-project的模板

命令输入后,会进入安装阶段,需要用户输入一些信息:

Project name (vuetest)                    项目名称,可以自己指定,也可直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。

Project description (A Vue.js project)  项目描述,也可直接点击回车,使用默认名字

Author (........)       作者(随便你)

Runtime + Compiler: recommended for most users    运行加编译,既然已经说了推荐,就选它了

Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere   仅运行时,已经有推荐了就选择第一个了

Install vue-router? (Y/n)    是否安装vue-router,这是官方的路由,大多数情况下都使用。

Use ESLint to lint your code? (Y/n)      是否使用ESLint管理代码,ESLint是个代码风格管理工具,是用来统一代码风格的,并不会影响整体的运行,这也是为了多人协作,新手就不用了,一般项目中都会使用。ESLint官网

接下来也是选择题Pick an ESLint preset (Use arrow keys)            选择一个ESLint预设,编写vue项目时的代码风格,因为我选择了使用ESLint

Standard (https://github.com/feross/standard)    标准,js的标准风格

AirBNB (https://github.com/airbnb/javascript)    JavaScript最合理的方法,这个github地址说的是JavaScript最合理的方法

none (configure it yourself)    自己定义风格 ,我选择标准风格

Setup unit tests with Karma + Mocha? (Y/n)  是否安装单元测试,教程未安装

Setup e2e tests with Nightwatch(Y/n)?     是否安装e2e测试 ,教程未安装

 

cd my-project        //进入到项目文件夹
npm install                    //初始化安装依赖
如图

3.启动运行命令的:npm run dev

4.在浏览器中打开http://localhost:8080

5.一般项目目录的简要说明(与本案例不符,仅为参考)

 

├── build
 
// 项目构建(webpack)相关代码
 
│ ├── build.js
 
// 生产环境构建代码
 
│ ├── check-versions.js
 
// 检查node&npm等版本
 
│ ├── dev-client.js
 
// 热重载相关
 
│ ├── dev-server.js
 
// 构建本地服务器
 
│ ├── utils.js
 
// 构建配置公用工具
 
│ ├── vue-loader.conf.js
 
// vue加载器
 
│ ├── webpack.base.conf.js
 
// webpack基础配置
 
│ ├── webpack.dev.conf.js
 
// webpack开发环境配置
 
│ └── webpack.prod.conf.js
 
// webpack生产环境配置
 
├── config
 
// 项目开发环境配置
 
│ ├── dev.env.js
 
// 开发环境变量
 
│ ├── index.js
 
// 项目一些配置变量
 
│ └── prod.env.js
 
// 生产环境变量
 
├──node_modules
 
// 项目依赖的模块
 
├── src
 
// 源码目录
 
│ │ ├── assets
 
// 资源目录
 
│ │ └── logo.png
 
 
 
│ ├── components
 
// vue公共组件
 
│ │ └── Hello.vue
 
 
 
│ ├──router
 
// 前端路由
 
│ │ └── index.js
 
// 路由配置文件
 
│ ├── App.vue
 
// 页面入口文件
 
│ └── main.js
 
// 程序入口文件
 
└── static
 
// 静态文件,比如一些图片,json数据等
 
│ ├── .gitkeep
 
 
 
├── .babelrc
 
// ES6语法编译配置
 
├── .editorconfig
 
// 定义代码格式
 
├── .gitignore
 
// git上传需要忽略的文件格式
 
├── index.html
 
// 入口页面
 
├── package.json
 
// 项目基本信息
 
├── README.md
 
// 项目说明

  

posted @ 2018-08-24 10:19  ln0909  阅读(176)  评论(0编辑  收藏  举报