从零开始搭建一个项目-前端框架（vue）

基础框架：Vue

UI框架：iview

样式：less

用到模块：vuex vue-router

Ajax：anios

 

第一步 安装淘宝镜像代替npm（可省略，如果省略了，后面所有cnpm改为npm）

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

第二步 创建Vue项目

　　按照https://vuejs-templates.github.io/webpack/中写的一步步执行

　　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.com>回车

　　　　　　（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官网，里面有安装教程https://www.iviewui.com/docs/guide/install 

　　　cnpm install iview --save

 

第六步 安装iview-loader

　　cnpm install iview-loader --save-dev

第七步 安装axios 

　　　cnpm install axios --save

第八步 安装vuex

　　　　https://vuex.vuejs.org/zh/installation.html文档中有安装步骤

　　   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 的配置，形如：　

　　https://www.iviewui.com/docs/guide/iview-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>

　　

　　

以上工作做完了，这个项目也就算搭好啦，至于别的东西，与业务场景相关度比较大。自由发挥吧。

 

 

 

转载于:https://www.cnblogs.com/yhz01/p/9523070.html