Vue框架搭建入门到熟悉

国内公司用Vue框架还挺多的，因此前端学习Vue变成了必备技能

一、安装

首先第一步搭建，按照之前你要先安装nodeJS，最好再装一个淘宝镜象cnpm， 安装vue-cli 脚手架构建工具，这几个步骤一次做完之后就可以

详情教程步骤参考，https://blog.csdn.net/m0_37479246/article/details/78836686

查看版本，node -v  ，如果是直接拿别人项目的代码，可以直接安装 cnpm install 安装之后 npm run dev 就可以了，打包项目 npm run build

二、webpack配置

默认里面的配置可能需要修改一下更适合你的项目，我遇到过的问题

1.打包出来之后资源文件路径不对，需要在config->index.js文件里面将 '/' 改成 ‘./’，本地访问的端口号也是在该文件里面配置

　build: {

assetsPublicPath: './',}

如果是图片路径访问不对，需要在build->utils.js里面修改配置

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

 

2.代码压缩之后上线不想要能看到源文件，需要在config->index.js文件里面

build: {productionSourceMap: false,}如果上线后要看源代码则需要true

三、安装vue插件

需要在package.json里面提前配置，这样安装的时候直接能安装进去，如果后续安装找对应npm安装命令行，主要用-save写入到配置文件的安装方式，比如

"dependencies": {
    "axios": "^0.16.1",
    "mint-ui": "^2.2.13",
    "vue": "^2.5.2",
    "vue-router": "^3.0.1"
  },

四、vue路由

路由跳转的方式 <router-link to=' '></router-link>    和   this.$router.push({path:' '})

带参数，可以用:to带参，或者用params（跳转路径只能用name，不能用path）或者query(url上会显示明文)

详细路由使用说明：https://www.jianshu.com/p/06d08ea39e31

五、关于路由跳转页面缓存问题，用keep-alive标签控制或者路由跳转控制等方法

六，还有组件间父子组件的传值等