webstorm创建vue项目

一. 新建项目步骤

创建vue-cli项目步骤：https://www.cnblogs.com/mapengfei247/p/11074429.html
其中改用npm install --global @vue/cli

@vue/cli v4官方中文文档: https://cli.vuejs.org/zh/guide/prototyping.html

离线创建项目步骤：
https://blog.csdn.net/XuM222222/article/details/85161178

1. 我已经把github复制到gitee上,下载下来项目速度会很快https://gitee.com/wangwei135/vue-cli-templates.git
2. 复制项目下来之后整个文件夹复制到C:\Users\username\.vue-templates并重命名为webpack，
3. 然后cmd中输入vue init <template-name> <project-name> --offline，也就是vue init webpack project --offline, 之后会自动创建project文件夹
4. 首先打开App.vue,删除那一行代码margin-top: 60px;

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  /*margin-top: 60px;*/   // 这一行代码删除掉,或者注释掉
}

git基本操作

4. gitee创建一个supermalll的仓库，复制提交地址https://gitee.com/username/projectName.git
5. 控制台中输入

git init
git status
git add .
git commit -m "第一次初始化"
git remote add origin https://gitee.com/username/projectName.git
git push -u origin master

推送到云端报错的解决方法： https://www.cnblogs.com/xiyin/p/7625293.html
还有一种简易的方法：先下载gitee仓库的空白代码，然后复制.git文件夹替换到项目中，再推送。

项目结构

设置别名alis
https://www.cnblogs.com/xiaofenguo/p/7603086.html
设置完之后还需要重启项目。
默认@表示src

二.使用element UI库

使用方法：安装 npm i element-ui -S
然后main.js中写入代码

// 引入el ui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

然后就可以直接使用了,例如在index.vue中写<el-button>Let's do it</el-button>就出现一个按钮。
更多组件见官网：https://element.eleme.cn/#/zh-CN/component/select

二.使用移动端UI库-Mint UI

官网地址： https://mint-ui.github.io/#!/zh-cn
使用方法：安装npm install mint-ui -S
然后main.js写入

// 引入全部组件
// 引入mint-ui全部组件
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)

三.安装使用scss

scss是sass的高级版
安装教程: https://blog.csdn.net/zhouzuoluo/article/details/81010331
报错解决方法: https://www.cnblogs.com/blucesun/p/11463426.html

我的操作:

# 版本8可能会报错
cnpm install sass-loader@7.3.1 --save-dev
cnpm install node-sass --sava-dev

然后配置 build/webpack.base.js中的module, rules下面添加:
{
test: /\.scss$/,
   loaders: ['style', 'css', 'sass']
},

最后使用:
<style scoped lang="scss">
  $color:red;
  div {
    color:$color;
  }
重新 npm run dev即可

vue插槽

插槽slot只是被用来替换的，文本会覆盖掉一些属性，所以文本的slot外最好套一层div,例如

<!--  class为active的绑定值isActive-->
<div :class="{active:isActive}"><slot  name="slot-item-text"></slot></div>

而不是<slot :class="{active:isActive}" name="slot-item-text"></slot>

四.vue安装与使用路由router

1. npm install vue-router --save --save表示运行时依赖
2. 根目录下新建文件夹router，router里面新建index.js,写入

import Vue from 'vue'
import Router from 'vue-router'

// 定义跳转页面的组件
const Home = () => import('../pages/home/Home')
const Cart = () => import('../pages/cart/Cart')
const Category = ()=> import('../pages/category/Category')
const Profile = ()=> import('../pages/profile/Profile')

// 1. 安装插件
Vue.use(Router)

// 3.导出router
export default new Router({
  // 2. 创建路由
  routes: [
    {
      // 定义默认跳转的页面
      path: '/',
      redirect: '/home'
    },{
      // 挨个设置页面调整的组件
      path:'/home',
      component:Home
    },{
      path: '/cart',
      component:Cart
    },{
      path: '/category',
      component:Category
    },{
      path: '/profile',
      component:Profile
    }
  ],
  // 默认使用hash模式，改用history模式
  mode:'history'
})

3. src下面main.js添加

// The Vue build version to load with the `import` command
// (runtime-only