CnodeJS-Vue（一）

创建项目

vue init webpack CnodeJS-Vue

一开始用了 vue init webpack-simple CnodeJS-Vue 目录结构相差很多。

vue init webpack CnodeJS-Vue

? Project name cnodejs-vue
? Project description rebuild CnodeJS by Vue
? Author yzygithub 
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

cd CnodeJS-Vue
#安装依赖
npm install
#开发环境启动服务
npm run dev

yzy@yzyMacBook-Pro:~/CODE/CnodeJS-Vue$ npm run dev

> [email protected] dev /Users/yzy/CODE/CnodeJS-Vue
> node build/dev-server.js

> Starting dev server...


 DONE  Compiled successfully in 3894ms                          15:56:40

> Listening at http://localhost:8082

config/index.js 里的 build: { assetsPublicPath: '/', 改为 assetsPublicPath: './'

解释：1.将 build 的路径前缀修改为 ' ./ '（原本为 ' / '），是因为打包之后，外部引入 js 和 css 文件时，如果路径以 ' / ' 开头，那么在本地是无法找到对应文件。所以如果需要在本地打开打包后的文件，就得修改文件路径。

安装 element-ui

npm i element-ui -S

顺便安装了sublime 的vue插件。command+shift+p =>Install Package=> vue syntax highlight

main.js里添加

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css'

Vue.use(ElementUI)

然后在.vue文件里就直接可以用了。
但是启动服务后,页面出现了cannot GET /
因为改了config/index.js里的dev: {assetsPublicPath: '/',} ，改成了assetsPublicPath: './' 。

安装 axios

npm install axios --save-dev
在main.js添加

import axios from 'axios'

Vue.prototype.$http = axios

安装 vue-svg-icon

npm install vue-svg-icon --save-dev
在main.js添加

import Icon from 'vue-svg-icon/Icon'

Vue.component('icon', Icon)

我在这里犯了个低级错误，写成了'vue-svg-icon/Icon.vue'，报错
'!xml-loader!../../src/svg'但是似乎只对第一次编译有影响。编译成功过后，再加回.vue没报错

在src目录中新建svg direction，然后将svg图片放入src/svg

这里推荐一个svg图片库iconfont

在网页中使用icon标签就可以了

---