脚本宝典收集整理的这篇文章主要介绍了vue开发总结，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

一、安装

1.安装vue-cli

全局安装vue-cli（3.0版本） $ npm install -g @vue/cli # 创建一个新项目 $ vue create my-PRoject # 进入项目 $ cd my-project # 安装依赖 $ npm install # 启动项目 $ npm run serve

创建项目时的具体配置可参考：vue脚手架3.0的使用

创建完成：

2.安装less（针对2.0版本,3.0在安装时已配置）

$ npm install --save-dev less less-loader

使用方式

<style lang="less">   @import "./assets/common.less"; </style>

<style lang="less"> #app {   font-family: 'Avenir', Helvetica, Arial, sans-serif;   color: #2c3e50;   margin-top: 60px; } </style>

webstorm编辑器，页面中的less文件会提示错误,添加rel="stylesheet/less"属性

<style scoPEd lang="less" rel="stylesheet/less"></style>

3.修改缩进方式(2.0版本,3.0版本不需要配置)

根目录.edITorconfig文件

indent_size = 4

webpack.base.conf.js文件设置，把下面这段注释掉就好了

const createLintingRule = () => ({   // test: //.(js|vue)$/,   // loader: 'eslint-loader',   // enforce: 'pre',   // include: [resolve('src'), resolve('test')],   // options: {   //   formatter: require('eslint-friendly-formatter'),   //   emitWarning: !config.dev.showEslintErrorsInOverlay   // } })

4.安装axios

文档地址：https://github.com/axios/axios

npm install --save-dev axios

axios.get('/user', {     params: {       ID: 12345     }   })   .then(function (response) {     console.LOG(response);   })   .catch(function (error) {     console.log(error);   });

二、新建路由（2.0版本）

1.目录主要介绍

buile//webpack配置信息 src//开发环境内容 --components//vue组件 --router   --index.js//路由配置信息 --App.vue//入口htML页面 --main.js//入口页面 static//打包后内容

2.新建页面

在components文件夹下新建Index.vue,页面内容如下

<template>     <div class="hello">         <h1>{{ msg }}</h1>         <h2>Essential Links</h2>     </div> </template> <script>     export default {         name: 'Index',//需要与路由配置的name统一         data () {             return {                 msg: 'Welcome to Your Vue.js App'             }         }     } </script> <style scoped lang="less" rel="stylesheet/less"> </style> 

3.添加路由

在router/index.js页面添加如下内容

import Index From '@/components/Index'

        {             path: '/',             name: 'Index',             component: Index         },

二、新建路由（3.0版本）

官方文档
无需安装，直接使用，在第一步安装完成时已经生成Store.js文件

未完待更~~

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的vue开发总结全部内容，希望文章能够帮你解决vue开发总结所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。