国内公司用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标签控制或者路由跳转控制等方法

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

 

posted on 2019-07-08 10:41  小海豚Dolphins  阅读(373)  评论(0编辑  收藏  举报