安装Vue-cli以及(项目中的目录含义)

自渡爱学习87240

2019-10-16 284 阅读1分钟

1.Vue cli

1>.安装脚手架(一般安装在全局)

$ npm install @vue/cli -g OR $ yarn global add @vue/cli -g
安装成功后,全局环境下会生成一个$vue的可执行命令,基于$ vue --version查看版本号

2>.创建工程化的项目

$vue create 项目名称(遵循npm包名称规范：数字或小写字母)
配置：(以 vue create project为例)

是否选用history router？

CSS预处理器：

![](p1-jj.byteimg.com/tos-cn-i-t2…

2.项目中的目录含义

src：存储我们项目开发的源文件

main.js：打包编译的入口文件
App.vue：项目页面的入口文件
- template:当前组件要渲染的视图
- style scope: 设置scope属性，代表当前的样式是组件的私有样式,和其他组件中的样式不冲突
- script：当前组件需要的JS部分：声明周期、DATA等
components：存放当前项目的公共组件
- xxx.vue
assets：一般存放项目中需要引入的静态资源文件
- xxx.png
- xxx.css

public

index.html：当前项目的主页面(我们最后把所有在src中写的内容，通过webpack/vue编译渲染后，最后都会呈现在index.html的#app容器中)
- 直接在这里引入的时候，我们导入的资源最好都设置为<%= BASE_URL %>这种方式，因为这样写的webpack会帮我们进行编译处理，例如：<link rel="icon" href="<%= BASE_URL %>favicon.ico"> <link rel="stylesheet" href="<%= BASE_URL %>reset.min.css">
xxx.xx虽然建议大家开发的时候，把代码或者资源都放置在src中，但是有时候，我们某些资源也可能需要单独在index.html就引用了

开发模式下，我们基于这个命令启动一下本地服务,把我们基于webpack编译后的内容预览$ npm run serve；
生产模式下，把写好的内容进行编译打包，最好部署到服务器上$ npm run build