vue-cli 的使用

一. vue-cli 简介

vue脚手架

在cmd命令窗口输入以下命令，全局安装vue-cli

# 删除掉老的
npm uninstall vue-cli -g

npm install -g vue-cli
# or
npm install -g @vue/cli

#安装完查看版本
vue --version
#文档
https://cli.vuejs.org/zh/guide/installation.html

二. vue命令

常用命令：

init           generate a new project from a template 用一个模板初始化新项目
list           list available official templates	  列出可用的官方模板
build          prototype a new project  			  创建新项目的原型
create         (for v3 warning only)
help [cmd]     display help for [cmd]

1. init

通过在命令窗口输入vue init -help 可知：初始化项目的命令如何写

D:\work-space\webstorm-space>vue init -help
Usage: vue-init <template-name> [project-name]

Options:
  -c, --clone  use git clone
  --offline    use cached template
  -h, --help   output usage information
  Examples:

    # create a new project with an official template
    $ vue init webpack my-project

    # create a new project straight from a github template
    $ vue init username/repo my-project

2. list

可用的模板：
目前是6个模板
一般用webpack模板

D:\work-space\webstorm-space>vue list

  Available official templates:

  ★  browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing.
  ★  browserify-simple - A simple Browserify + vueify setup for quick prototyping.
  ★  pwa - PWA template for vue-cli based on the webpack template
  ★  simple - The simplest possible Vue setup in a single HTML file
  ★  webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
  ★  webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.

三. 创建项目

创建项目时，在其父目录下执行命令
项目名要小写

D:\work-space\webstorm-space> vue init webpack vue-demo
? Project name vue-demo  # 项目名称，默认是上边命令中的名称，也可修改,项目名要小写
? Project description A Vue.js project # 项目描述 
? Author 作者信息  # 作者，可能有默认值
? Vue build standalone  # 构建方式
? Install vue-router? No #路由
? Use ESLint to lint your code? Yes # 代码检测
? Pick an ESLint preset Standard
? Set up unit tests No #单元测试
? Setup e2e tests with Nightwatch? No # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm
# 包管理工具
   vue-cli · Generated "vue-demo".

# Installing project dependencies ...
# ========================
.............
# Project initialization finished!
# ========================

To get started:

  cd vue-demo
  npm run dev

构建项目的方式：

• 运行和编译时 推荐方式
• 运行时

esint语法规则和代码风格的检查工具
包管理工具

• npm ：vue项目用这个
• yarn : react 推荐用这个，facebook主推，据说更安全

四. 项目结构简介

|-- build                            // 项目构建(webpack)相关代码
|   |-- build.js                     // 生产环境构建代码
|   |-- check-version.js             // 检查node、npm等版本
|   |-- utils.js                     // 构建工具相关
|   |-- vue-loader.conf.js           // webpack loader配置
|   |-- webpack.base.conf.js         // webpack基础配置
|   |-- webpack.dev.conf.js          // webpack开发环境配置,构建开发本地服务器
|   |-- webpack.prod.conf.js         // webpack生产环境配置
|-- config                           // 项目开发环境配置
|   |-- dev.env.js                   // 开发环境变量
|   |-- index.js                     // 项目一些配置变量
|   |-- prod.env.js                  // 生产环境变量
|-- src                              // 源码目录
|   |-- components                   // vue公共组件
|   |-- router                       // vue的路由管理
|   |-- App.vue                      // 页面入口文件
|   |-- main.js                      // 程序入口文件，加载各种公共组件
|-- static                           // 静态文件，比如一些图片，json数据等
|-- .babelrc                         // ES6语法编译配置
|-- .editorconfig                    // 定义代码格式
|-- .gitignore                       // git上传需要忽略的文件格式
|-- .postcsssrc                       // postcss配置文件
|-- README.md                        // 项目说明
|-- index.html                       // 入口页面
|-- package.json                     // 项目基本信息,包依赖信息等

webstrom 使用总结

在webstrom中启动项目的两种方式：

在命令窗口中输入 npm run dev 或者 npm start