安装创建vue项目

1.安装vue和vue/cli

在用 Vue 构建大型应用时推荐使用 NPM 安装。NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用。同时 Vue 也提供配套工具来开发单文件组件,F:\django\LeheXueXiProjects文件下进入dos命令

# vue及vue/cli安装命令
$ npm install -g vue 
$ npm install -g @vue/cli-init

都安装完后,执行vue命令报错不是内部或外部命令,查找路径 npm config list 加入环境变量后不行,发现在C:\Users\Administrator\AppData\Roaming\npm下并没有vue.cmd相关文件,更新全局npm npm i npm -gnpm i vue-cli -g 再执行 vue -V 成功

2.自定义创建vue项目

$ vue create lehu-xuexi

安装过程中选择 Manually select features ,勾选Babel、Router、Vuex、CSS Pre-processors、Linter/Formatter回车,Pick a css pre-processtor选择 Less ,Pick a linter/formatter config选择 ESLint + Standard config ,Pick addtional lint features选择 Lint on save ,where do you prefer placing选择 In dedicated config files ,最后选择 No 开始创建项目,结果如下

...
...
  Running completion hooks...
  Generating README.md...
  Successfully created project lehu-xuexi.
  Get started with the following commands:
 $ cd lehu-xuexi
 $ npm run serve

创建项目成功后,导入pycharm重新新建一个窗口,在terminal下运行项目 npm run serve即可

3.安装vue插件vue-devtools

接下来在chrome安装一个vue插件vue-devtools,下载文件(https://pan.baidu.com/s/1pCf1NOdWVbN7c7IJpNz3Ug --解压密码: qpd9 )并将crt格式改成rar文件,解压后直接导入到chrome,打开地址访问 http://127.0.0.1:8080/

安装引用iView和axios

1.安装IView

在vue项目地址下进入cmd,安装iView

$ cnpm i --save iview

安装成功后在package.json的dependencies下可以看iview版本为3.5.4、devDependencies下less版本为3.0.4,但是less版本不能高于2.7,修改"less": "^3.0.4"为"less": "^2.7.3",执行 cnpm install 替换版本安装

2.安装axios

安装命令

$ cnpm i --save axios

# 日志
 Installed 1 packages
 Linked 4 latest versions
 Run 0 scripts
 All packages installed (5 packages installed from npm registry, used 927ms(network 923ms), speed 133.8
1kB/s, json 5(15.63kB), tarball 107.87kB)

3.注册引用iView

src下新建plugins文件,再创建iview,js,注册写入

import Vue from 'vue'
import iView from 'iview'

import 'iview/dist/styles/iview.css'

Vue.use(iView)

src下main.js新增导入plugins,新增如下

import './plugins/iview'

接下来验证使用下iview,在src/views的About.vue加上日期选择器看一下,发现about下多了一个日期选择器

# 新增了DatePicker
<template>
  <div class="about">
    <h1>This is an about page</h1>
    <DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
  </div>
</template>

4.注册引用axios

src下新建api文件夹和store文件夹,并在api文件夹下新建api.js和axios.js,在store文件夹下新建store.js

store.js写入

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {

  },
  mutations: {

  },
  actions: {

  }
})

axios.js写入

/* eslint-disable */

// 引入vue
import axios from 'axios'

// // // 全局状态控制引入
// import store from '../store/store'
//
// //
// // http request 拦截器
// axios.interceptors.request.use(
//   config => {
//     if (store.state.userInfo.token) {
//       // 判断是否存在token,如果存在的话,则每个http header都加上token
//       config.headers.Authorization = `${store.state.userInfo.token}`
//     }
//     return config
//   },
//   err => {
//     return Promise.reject(err)
//   })

api.js写入

import axios from 'axios'

let host = 'http://127.0.0.1:8000/api/v1'

// 验证码
export const getVerifyCode = params => { return axios.post(`${host}/code/`, params) }

// 注册
export const registUser = params => { return axios.post(`${host}/register/`, params) }

// 登录
export const loginUser = params => { return axios.post(`${host}/login/`, params) }

main.js修改store路径

# 修改前
import store from './store'
# 修改后
import store from './store/store'

src下新建router.js,写入

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'

Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('./views/About.vue')
    }
  ]
})

主页新增导航栏等样式

修改src/views下的Home.vue,修改msg

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="学而时习之,不亦乐乎?"/>
  </div>
</template>

views下新建TopNav.vue视图,写入

<template>
  <Menu mode="horizontal" theme="dark" active-name="1" @on-select="handleSelect">
    <menu-item name="home">
      <Icon type="ios-paper" />
      网站主页
    </menu-item>
    <menu-item name="blogs">
      <Icon type="ios-people" />
      博客文章
    </menu-item>
    <menu-item name="courses">
      <Icon type="ios-people" />
      课程中心
    </menu-item>
    <menu-item name="users">
      <Icon type="ios-people" />
      个人中心
    </menu-item>
    <menu-item name="login">
      <Icon type="ios-construct" />
       
    </menu-item>
    <menu-item name="register">
      <Icon type="ios-construct" />
       
    </menu-item>
  </Menu>
</template>

<script>
export default {
  name: 'TopNav',
  methods: {
    handleSelect (name) {
      console.log(name)
      if (name === 'blogs') {
        this.$router.push({ name: 'blog_list' })
      }
    }
  }
}
</script>

<style scoped>

</style>

App.vue导入Topvue,并引用进来,编辑App.vue

# 引用TopNav
<template>
  <div id="app">
    <div id="nav">
      <TopNav></TopNav>
    </div>
    <router-view/>
  </div>
</template>

# 导入TopNav
<script>
import TopNav from './views/TopNav'
export default {
  name: 'App',
  components: { TopNav }
}
</script>
...
...

到这里,都配置引用完了,来看下页面效果 markdown vue官方文档:https://cn.vuejs.org/v2/guide/

iview官方文档:https://www.iviewui.com/

pycharm支持vue.js语法高亮请在settings->Plugins,搜索vue.js插件安装并重启

版权声明:如无特殊说明,文章均为本站原创,转载请注明出处

本文链接:http://example.com/article/vue-setting/