vue-cli 基础项目构建

1、全局安装vue-cli

npm install vue-cli

2、进入项目目录

cd 文件夹名称

3、初始化项目(以webpack初始化)

vue init webpack 项目名

4、回车输入配置

配置详解

  • project name 项目名称(可直接回车,默认为初始化项目的名称)
  • project description 项目描述
  • Author 作者
  • Vue build vue构建方式(默认就行)
  • Install vue-router? 是否安装vue路由, y
  • Use Eslint to lint your code? 是否需要eslint来优化代码(根据个人需要,选择是的话需要在选择eslint标准)
  • Pick an Eslint preset 选择eslint标准(默认就行了)
  • set up unit test 单元测试(y)
  • pick a test runner 也是测试相关(karma)
  • setUp e2e test with Nightwatch? e2e测试(y)
  • Should we run ‘npm install’ for your after the project has been created?(是否在项目构建后使用npm install 安装插件) 可选择安装,也可后面自己安装

vue-cli 基础项目构建

5、安装依赖

cd 项目名 进入项目文件夹
npm install 安装项目依赖

6、项目运行

npm run dev
成功后如下图所示,浏览器中打开对应网址即可
vue-cli 基础项目构建

7、项目文件介绍

vue-cli 基础项目构建
build中存放项目构建相关代码,包含webpack.config.js
vue-cli 基础项目构建
src中主要放置项目源码
vue-cli 基础项目构建
static本地静态服务器
可用于存放静态数据