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 安装插件) 可选择安装,也可后面自己安装
5、安装依赖
cd 项目名
进入项目文件夹npm install
安装项目依赖
6、项目运行
npm run dev
成功后如下图所示,浏览器中打开对应网址即可
7、项目文件介绍
build中存放项目构建相关代码,包含webpack.config.js
src中主要放置项目源码
static本地静态服务器
可用于存放静态数据