资讯专栏INFORMATION COLUMN

Vue入坑笔记

superw / 604人阅读

摘要:近段时间常使用开发,写点记录,避免时间久之忘了。安装教程查看是否已安装,在中输入若已安装则输出版本号。继承报错可能是文件路径问题。当和继承的不同时在文件夹内外的话,会出现该错误。

近段时间常使用vue-cli开发,写点记录,避免时间久之忘了。

环境

1. nodejs
  vue-cli开发基于nodejs环境,确保开发的环境中已安装了nodejs。
  安装教程 https://www.runoob.com/nodejs...
  查看是否已安装nodejs,在cmd中输入 node --version 若已安装则输出版本号。

2. vue
  安装vue环境 npm install vue
  安装vue-cli环境,npm install --global vue-cli

新建项目

1. 新建模板
  新建一个projectname的项目 vue init webpack projectname
  之后会出现Project name和Project description之类的,无关紧要,可以修改,也可以默认跳过。
  是否安装路由 ?Install vue-router?(Y/n) Y //看情况定,一般都有用到
  初始化项目完毕,根据提示操作,模块安装完后即可启动项目 npm run dev

2. 修改配置
  安装的模板有些配置一般情况不符合自己需要,需要手动做些修改。
  build文件夹utils.js文件中设置 publicPath: "../../" 解决图片路径找不到的问题
  config文件夹的index.js文件build对象下的 assetsPublicPath: "./" 解决打包后的项目页面空白问题

3. 安装模块
  使用模块配合开发,如 Vue + Vuex + elementUI + axios + font-awesome + scss

Scss

  安装 Scss,使用方式