vue命令在当前目录快速生成项目详解,vue项目目录文件说明
准备:全局安装脚手架工具 vue-clinpm命令npm i vue-cli -g如果安装了yarn 可以用yarn global add vue-cli安装之后通过vue --version可查看版本1,使用vue命令在当前目录快速生成项目 vue init webpack 项目名字1,默认项目名字2,默认项目描述3,作者(默认读取git配置)4,选择构建版本,选择runti...
准备:全局安装脚手架工具 vue-cli
npm命令npm i vue-cli -g
如果安装了yarn 可以用yarn global add vue-cli
安装之后通过vue --version
可查看版本
1,使用vue命令在当前目录快速生成项目 vue init webpack 项目名字
- 1,默认项目名字
- 2,默认项目描述
- 3,作者(默认读取git配置)
- 4,选择构建版本, 选择runtime生成文件更小一点,约小30%
- 5,是否安装vue-router(路由) y
- 6,是否使用eslint校验代码 y
- 7,选择eslint标准 standard
- 8,单元测试 n
- 9,是否设置e2e设置 n
- 10,安装依赖包 安装yarn之后就选择yarn,没有就npm
2,根据命令1进入项目,命令2运行项目命令2也可以用 yarn dev
(config目录下index.js中的autoOpenBrowser设置为true可配置为自动打开浏览器)
3,vue项目目录说明:
1, build目录: 跟webpack相关的目录
2, config目录:常用的配置index.js
autoOpenBrowser: true: 是否自动打开浏览器
useEslint: true (是否使用eslint校验代码)
3, src目录: 写代码的地方
4, static目录:static目录中的文件不会被webpack打包
.gitkeep: 如果一个目录是空的,会git忽略掉 (不显示)加.gitkeep文件可以被git管理
5, babelrc: babel的配置文件
6, editorconfig: 编辑器的配置 保证将来所有的编辑器的代码的缩进风格都是一样的
vscode需要一个插件 editorconfig
7, eslintigore: 打包后的一些目录忽略掉
8, eslintrc: eslint的配置文件
8, .gitignore: git的忽视文件
9, postcssrc.js:预编译(类似sass,less)
10, index.html 整个vue项目的模板文件
11, package.json 项目的包文件
12,README.md 执行文件
13, yarn.lock 安装yarn的时候一个配置文件
4,src目录:
- 1,assets文件: 存放静态资源,公共的图片,公共的样式,公共的js等
- 2,componenents : 存放组件
- 3,router :存放路由(index.js)
- 4,App.vue : 整个页面的根组件
- 5,main.js : 初始化vue实例并使用所需要的插件(其中初始化了一个vue对象,el为实例提供挂载元素)
5,关闭vue生产提示
Vue.config.productionTip = false
6,这行注释能避免实例化对象没有接收或使用而报错
/* eslint-disable no-new */
7,配置路由 :
- 1,引入vue-router
- 2,配置规则
8,新建组件:
- 1,在src下新建文件夹components,其中新建新组件
- 2,在main.js引入新组件
9,路由提取:
- 1,在src下新建文件夹router,其中新建index.js配置路由
- 2,把路由相关的放进去
到这里,就全部配置好了,其实步骤1,2之后,56789都是自动配置好的,我们只要使用就好啦!
更多推荐
所有评论(0)