使用 vue-cli3 创建项目

使用 vue-cli3 创建项目

参考文章: https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create

1. 安装淘宝镜像

npm install -g cnpm --registry=https://registry.npm.taobao.org

2. 安装vue-cli 3

如果之前安装过其他版本的的vue-cli 就卸载掉

npm uninstall -g vue-cli

如果不确定有没有安装过,可以先查看

# 查看vue-cli的版本  # 注意-V大写
vue -V 

如果没有安装过,那么执行以下步骤

# 全局安装  i就是install的简写
npm i @vue/cli -g 
# 查看vue-cli的版本  # 注意-V大写
vue -V   

ludg-190517-170341.jpg

3. 创建项目

# 进入想要保存项目的目录
E:
cd E:/workspace/my_workspace/javaScript
# 创建项目 # vue_demo_1 是项目名
vue create vue_demo_1 

vue create 命令有一些可选项,你可以通过运行以下命令进行探索:

vue create --help

用法:create [options]

创建一个由 vue-cli-service 提供支持的新项目

选项:

-p, –preset 忽略提示符并使用已保存的或远程的预设选项
-d, –default 忽略提示符并使用默认预设选项
-i, –inlinePreset 忽略提示符并使用内联的 JSON 字符串预设选项
-m, –packageManager 在安装依赖时使用指定的 npm 客户端
-r, –registry 在安装依赖时使用指定的 npm registry
-g, –git [message] 强制 / 跳过 git 初始化,并可选的指定初始化提交信息
-n, –no-git 跳过 git 初始化
-f, –force 覆写目标目录可能存在的配置
-c, –clone 使用 git clone 获取远程预设选项
-x, –proxy 使用指定的代理创建项目
-b, –bare 创建项目时省略默认组件中的新手指导信息
-h, –help 输出使用帮助信息

比如可以直接使用 下边命令创建项目,省去中间配置项目的提示

vue create -d vue_demo_2

4. 安装必要的组件

安装router
npm install vue-router -S
安装vuex
npm install vuex -S

在mian.js中使用 router 和 vuex

import router from './router'
import store from './store'

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

5. 配置路由

在app.vue中加入路由

<div id="app">
    <router-view/>
</div>

在 src 根目录下创建 router.js 并配置路由信息

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

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'index',
      component: () => import('./pages/index.vue')
    },
    {
      path: '/login',
      name: 'login',
      component: () => import('./pages/login.vue')
    }
  ]
})