vue2创建项目及部分注意点

步骤

准备

1. 确认安装环境 node -v, npm -v
2. 确认是否安装了vue脚手架: vue -V (这是vue2的用法)

如果没有，就执行第三步

3. 安装脚手架

• npm install -g @vue/cli 安装脚手架cli3.
• sudo npm install -g @vue/cli 解决
• 安装失败，先卸载
• npm cache clean -f

创建项目

1. 创建项目:vue create learnvue

1.Manually 自定义安装
2.Babel
  Router
  Css Pre processors
  Linter/formatter
3.选择vue版本
4.选择router是否使用历史模式，如果选择y，后台服务器需要进行相应的配置
5.选择less 的 css预处理
6.代码检查和格式化工具-ESLint with error prevention only(只检查并预防js代码中的错误。会捕捉例如：变量未声明，使用了未定义的变量等)
7.代码检查功能-lint on save(运行ESLint进行静态代码分析的两种不同方式，保存时检测)
8.babel，eslint等配置放在哪里-config files
9.是否保存为预设-n

3. 手动添加路由 npm install vue-router --save

• npm install --save vue-router@3 vue2对应了路由3

4. vue中动态显示图片需要引入，用插槽解决这个问题

注意点

1. 组件名用驼峰，且首字母大写
2. style中引用文件 @import “”
3. Js 引用文件 import
4. tabbar高度 49px

图片和文字紧挨着时，图片下面默认有3像素，图片用vertical-align:middle

6. 路径起别名：webpack.base.conf.js中resolve

//webpack.base.conf.js
resolve: {
 //在这里配置了，在导入时，这种格式的就可以省略
 extensions:['.js','.vue','.json'],
 alias: {
 //给src起了个别名 import里都可以，属性 src里 用～assets
   '@': resolve('src'),
   'assets': resolove('@/assets')//脚手架3的写法
   'assets': resolove('src/assets')//脚手架2的写法
 }
 
}