从零开始搭建⼀个项⽬-前端框架（vue）
基础框架：Vue
UI框架：iview
样式：less
⽤到模块：vuex vue-router
Ajax：anios
第⼀步安装淘宝镜像代替npm（可省略，如果省略了，后⾯所有cnpm改为npm）
  npm install -g cnpm --registry=registry.
第⼆步创建Vue项⽬
  按照中写的⼀步步执⾏
  1、 npm install -g vue-cli
  2、vue init webpack my-project
    my-project：项⽬所在⽂件夹名称
    执⾏后会出现：
      （1）Project name 输⼊你的项⽬名称
      （1）Project description 输⼊项⽬描述
      （1）Author xxxxx <xxxxxx@xxx>回车
      （1）Install vue-router? (Y/n)  是否安装vue-router根据个⼈情况填写是否安装
      （1）Use ESLint to lint your code? (Y/n)  是否安装ESLint根据个⼈情况填写是否安装
      （1）Set up unit tests? (Y/n)  是否安装单元测试根据个⼈情况填写是否安装
      （1）Setup e2e tests with Nightwatch? (Y/n)  是否要安装端对端测试根据个⼈情况填写是否安装
  3、cd my-project
  4、npm install
  5、npm run dev
  好了，到这⼀步，基本的vue项⽬已经好了。ps：如果想让项⽬启动后⾃动打开浏览器，在config下的index.js⽂件中到autoOpenBrowser，把它的值改为true即可。
第三步安装less
  cnpm i less --save
第四部安装less-loader
  cnpm i less-loader --save
第五步安装iview
    到iview官⽹，⾥⾯有安装教程
  　cnpm install iview --save
第六步安装iview-loader
  cnpm install iview-loader --save-dev
第七步安装axios
  　cnpm install axios --save
第⼋步安装vuex
    ⽂档中有安装步骤
    cnpm install vuex --save
  ⾄此，依赖库什么都装的差不多了，装好了之后并未结束，还需要引⼊到项⽬中
第九步引⼊
  （1）引⼊vuex  参考官⽅⽂档
  （1）引⼊iview  参考官⽅⽂档   
    import Vuex from 'vuex'
    // 引⼊iview
    import iView from 'iview';
    import 'iview/dist/styles/iview.css';
    Vue.use(iView);
    Vue.use(Vuex)
  配置 webpack，改写平时 vue-loader 的配置，形如：　
  {
    test: /\.vue$/,
    loader: 'vue-loader',
    options: vueLoaderConfig
  },
  改写为：
  {
    test: /\.vue$/,
    use: [
      {
        loader: 'vue-loader',
        options: {}
      },
      {
        loader: 'iview-loader',
        options: {
          prefix: false
        }
      }
    ]
  },
  改写原因：⽤<Switch>标签写了个demo测试iview，发现未⽣效，⽂档说如果没有引⼊iview-loader，要⽤<i-Switch>代替<Switch>标签。为了不加i-，引⼊了iview-loader，并对其进⾏以上配置。
  引⼊结束也不算结束，我们需要测试下我们引⼊的这些到底有没有⽣效，所以就简单写个demo测试下
  1、测试Vuex 在main.js⾥⾯添加store: Vuex,
  2、写测试代码
<div class="test-iview">
<Switch size="large" />
<Switch />
<Switch size="small" />
</div>
<div class="test-less">
<p class="less-p">测试less</p>
</div>
created () {
好用的前端框架console.log(this.$store, '测试store vuex')
}
<style lang="less" scoped>
.test-less {
.less-p {
color: blue;
}
}
</style>
以上⼯作做完了，这个项⽬也就算搭好啦，⾄于别的东西，与业务场景相关度⽐较⼤。⾃由发挥吧。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。