nuxt+typescript+elementUI+vuex的搭建过程和nuxt的基本使用

nuxt+typescript+elementUI+vuex的搭建过程和nuxt的基本使用

nuxtjs官方文档(点击跳转)

搭建前准备,全局安装nuxtjs,(mac用户加上sudo)

cnpm i create-nuxt-app -g

1.开始搭建项目：hello-nuxt

create-nuxt-app hello-nuxt

选择express => Element UI => jest => SPA => axios => vuex 然后运行项目，测试项目是否运行成功

2.配置scss(不需要的跳过此步骤)

yarn add node-sass sass-loader sass --save-dev

在nuxt.config.js配置，加上如下配置，表示在全局引用下面的main.scss文件,也可以局部使用

css: [
                '@/assets/css/main.scss'//表示在assets目录下面的css目录下面的main.scss (这是全局样式)
              ]

局部使用scss，把style改成即可

<style lang="sass" scoped>

</style>

3.配置less (不需要的跳过此步骤)

yarn add less less-loader -D

全局使用less，和上面的scss全局使用一致，就是把.scss后缀改成.less后缀

局部使用less，把style改成即可

<style lang="less" scoped>

</style>

4.中间件的使用，middleware/stats.js=>加入以下代码

 import axios from 'axios';
 export default function({
   route}){
   
   return axios.post("http://my-stats-api.com",{
   
     url:route.fullPath
   })