VUE——HelloWorld

1、安裝node環境

https://nodejs.org/zh-cn/

我下載的是win10的，自帶npm，安裝好測試一下

node -v

npm -v

有版本號即可

------------------此時node環境安裝完畢

由於npm有些資源被屏蔽或者是國外資源的原因，經常會導致用npm安裝依賴包的時候失敗，所有我還需要npm的國內鏡像---cnpm
在命令行中輸入

npm install -g cnpm --registry=http://registry.npm.taobao.org

安裝webpack
cnpm install webpack -g

安裝vue-cli
cnpm install vue-cli -g

2、運行一個vue項目

進入vue項目，執行

npm install 

然後
npm run dev

最後訪問  ip+端口  即可

vue官網地址http://vuejs.org.cn/

查看API文檔https://vuefe.cn/v2/api/

對比其他框架http://vuejs.org.cn/guide/comparison.html

3、vue配置

使用vue init webpack demo 創建我的demo如下圖

目錄結構如圖

使用VS Code打開編輯

3.2安裝element-ui 命令：npm i element-ui -S

3.3安裝axios 命令：npm i axios  -S

 

4、創建目錄結構

src：

static

5、寫頁面

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name:'app'
}
</script>

<style lang="scss">
  @import "./style/style";
</style>

因爲我們使用了 scss 文件預編譯，所以我們需要安裝兩個支持 scss 的 npm 包

npm install sass-loader -D
npm install node-sass -D

調整 index.vue 和 content.vue 文件

<template>
  <div>index page</div>
</template>

<template>
    <div>content page</div>
</template>

調整router下的index.js文件

import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/page/index'
import Content from '@/page/Content'

Vue.use(Router)

export default new Router({
  routes:[
    {
      path: '/',
      component: Index
    },
    {
      path: '/content/:id',
      component: Content
    }
  ]
})

因爲我們的內容頁面是要展示N條內容的，我們如何來區分這些內容呢，就是根據ID來進行區分。所以，這裏使用了動態路由匹配。

 

6、配置ajax

安裝插件

npm install axios -D