Nuxt框架起步

 

安裝報錯

Nuxt.js 是一個基於 Vue.js 的通用應用框架。

 

經過對客戶端/服務端基礎架構的抽象組織，Nuxt.js 主要關注的是應用的 UI渲染。

Nuxt.js 預設了利用 Vue.js 開發服務端渲染的應用所須要的各類配置。因爲它是一個在服務器進行渲染的框架，

因此很適合用來作SEO。

 

官方網址： https://zh.nuxtjs.org/guide

 

安裝語句：$ npx create-nuxt-app <項目名>

此時可能會出現以下報錯：
C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\18012\node_modules\create-nuxt-app\node_modules\sao\lib\installPackages.js:108
        throw new SAOError(`Failed to install ${packageName} in ${cwd}`)
        ^SAOError: Failed to install packages in C:\Users\Administrator\Desktop\Dome\topology-vue


解決方案：
Might be a cache issue, try installing without using your NPM cache:
npm install --cache /tmp/empty-cache

If so, clean your NPM cache by running:
npm cache clean --force

 

　　

Nuxt框架模塊安裝使用

　　1. 進入項目目錄下載對應的模塊

npm i element-ui -S

 

　　  2. 在項目的plugin文件下建立ElementUI.js文件，內容以下

  import Vue from 'vue'
  import ElementUI from 'element-ui'
  Vue.use(ElementUI)

　　  3. 在nuxt.config.js 中添加配置， 配置好後就能夠npm run dev 了（對了找到對應的組件添加：<el-button>試試看</el-button>）

   css: [
     'element-ui/lib/theme-chalk/index.css'  // 引入全局樣式
   ],
   plugins: [
     {src: '~/plugins/ElementUI', ssr: true } // ssr:true表明在服務端渲染,客戶端不渲染
   ],
   build: {
     vendor: ['element-ui'] // 防止重複重複打包
   }