搭建Vue脚手架（vue-cli）并创建一个项目【看这一篇就够了】【个人记录，以便后期参考】

最新推荐文章于 2021-07-09 14:16:05 发布

先来个小漩涡

最新推荐文章于 2021-07-09 14:16:05 发布

阅读量683

点赞数

分类专栏： vue构建项目高阶文章标签：搭建Vue脚手架（vue-cli）并创建一个项目【看这一篇就够了】【个 vue-cli axios jquery 接口配置

本文链接：https://blog.csdn.net/weixin_43023873/article/details/100728933

版权

高阶同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

vue构建项目

10 篇文章 0 订阅

订阅专栏

1、安装nodejs环境

2、安装vue-cli

3、全局安装 vue-cli

4、使用vue-cli来创建一个基于 webpack 模板的新项目

5、通常我们需要在项目中引入jquery使用

6、引入axios

7、引入elementUI

8、添加vuex

9、接口配置static：config.js asstes: request.js

10、打包配置路径：【找不到图片路径之类问题】

1、安装nodejs环境

官网下载：https://nodejs.org/en/download/
一直默认就行，路径可以改变但要记得到
安装后查看版本号：

node -v 
npm -v

如果能看到node和npm的版本号了，说明已经安装成功

2、安装vue-cli

有npm和cnpm两种方式，网上都说cnpm好些，所以我也用的cnpm安装，

首先利用淘宝镜像安装cnpm

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

安装完成，输入

cnpm -v

查看是否安装成功

3、全局安装 vue-cli

cnpm install -g vue-cli

查看vue版本号

vue -V    //注：V是大写字母V

如果提示“无法识别 ‘vue’ ” ，有可能是 npm 版本过低，需要手动更新npm的版本号，这也是上面说的为什么要保证npm版本号高的原因，npm的版本可以手动升级更新，

npm install -g npm

4、使用vue-cli来创建一个基于 webpack 模板的新项目
创建
cmd利用cd指令进入到保存项目的文件夹下，然后输入命令
vue init webpack

如图标记处输入项目名称（随便命名，但不要是中文），其它的看自己需要自行考虑yes还是no，每项的介绍自行百度
在这里插入图片描述

也可以直接把项目名写在命令后面

创建完成后文件夹内会有如下些文件
在这里插入图片描述

安装项目所需要的依赖
进入新建的项目文件夹下，就是上头有一些文件的里面，输入命令

cnpm install

这里写图片描述
因为自动构建过程中已存在package.json文件，所以这里直接安装依赖就行。

运行项目

cnpm run dev

这里写图片描述

退出，Ctrl + c >> y >> 回车

出现如图画面，在浏览器中输入网址http://localhost:8080 会出现如下图
在这里插入图片描述

注意：如果浏览器打开之后，没有加载出页面，有可能是本地的 8080 端口被占用了（默认服务启动的是本地的8080端口），可以通过修改一下配置文件 config>index.js里的端口号
这里写图片描述

网上有的说执行cnpm run dev后，浏览器会自动默认打开一个“欢迎页面”，但是我的没有，原因应该如下
目录中config下的index.js文件中，将autoOpenBrowser的值是false，改为true就能自动打开了

4、后续其它步骤—打包上线

自己的项目文件都需要放到 src 文件夹下

项目开发完成之后，可以输入 npm run build 来进行打包工作

npm run build

打包完成后，会生成 dist 文件夹，如果已经修改了文件路径，可以直接打开本地文件查看

项目上线时，只需要将 dist 文件夹放到服务器就行了。

附：部分文件功能介绍（网上找的图片）
这里写图片描述

5、通常我们需要在项目中引入jquery使用

首先安装jquery

npm install jquery --save

在项目 build 里的webpack.base.conf.js 里加载webpack文件，注意，要放在配置文件第一行；

在这里插入图片描述

在这里插入图片描述
在module.exports的最后加入

在这里插入图片描述

导入jquery【在min.js中加入】

import $ from 'jquery'

以上4个步骤即是引入jquery

使用jquery

如：
在这里插入图片描述

6、引入axios

安装 axios

指令：

 npm -i --save axios

以及

 npm i --save vue-axios

然后在 main.js 中引入

import Vue from 'vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'
import $ from 'jquery'
import axios from 'axios'//引入axios
import Vuex from 'vuex'
import store from './store/store'

Vue.config.productionTip = false

Vue.use(ElementUI);
Vue.use(Vuex)
Vue.prototype.axios = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//使用store
  components: { App },
  template: '<App/>'
})

调用axios

<template>
  <div class="hello">
    <button @click="show" >点我</button>
    <div class="show" v-show="showText">
      {{content}}
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      content: '',
      showText: false
    }
  },
  created() {
  //POST
    this.axios.post('https://api.coindesk.com/v1/bpi/currentprice.json',{传递的数据 }
        ).then(function (res) {//成功
          console.log(res)
        }).catch(function (res) {//失败
          console.log(res)
        });
//GET
	this.axios.get(allApi.ExportToFile,{
	        params:{
	          PageIndex:1,
	          PageSize: 1000000000,
	          StrOrder:"add_time",
	          OrderStatus:this.OrderValue,
	          PayStatus:this.paymentValue,
	          LogisticsStatus:this.logisticsValue,
	          Key:this.input,
	          SupplierID:this.SupplierID,
	          WarehouseID:this.WarehouseID,
	          StartTime:this.StartTime,
	          EndTime:this.EndTime,
	        }
	
	        }
	      ).then(function (res) {
	        // self.tableData=res.data.Result.Data;
	        // self.total=res.data.Result.Amount;//总条数total
	      }).catch(function (res) {
	        console.log(res)
	      });
	  },
  methods: {
    show () {
      this.showText = !this.showText
    }
  }
}
</script>

<style scoped>

</style>

7、引入elementUI

官网吧，没撒好说的
https://element.eleme.cn/2.0/#/zh-CN/component/installation

在min.js中做修改

import Vue from 'vue'
import ElementUI from 'element-ui';//ElementUI引入
import 'element-ui/lib/theme-chalk/index.css';
import App from './App'
import router from './router'
import $ from 'jquery'
import axios from 'axios'//引入axios
import Vuex from 'vuex'
import store from './store/store'

Vue.config.productionTip = false

Vue.use(ElementUI);//ElementUI注册
Vue.use(Vuex)
Vue.prototype.axios = axios;
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,//使用store
  components: { App },
  template: '<App/>'
})

8、添加vuex

1.安装 vuex

npm install vuex --save   或者  cnpm install vuex --save

2.vuex理解
官方解释：vuex是一个专为vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

我的理解：可以理解为是一个全局变量

例如：模块a / 模块b。

我想模块b获取模块a的数据。

方法1: 用组件之间通讯。这样写很麻烦，并且写着写着，估计自己都不知道这是啥了，很容易写晕。

方法2: 我们定义全局变量。模块a的数据赋值给全局变量 x。然后模块b 获取x。这样我们就很容易获取到数据

我们把模块a 的数据叫 state。全局变量叫store。模块b 叫data

Getter 是一个纯函数，用于接收state 参数。返回你需要取的值

mutation  是对  state 进行修改

action  处理数据，对处理的数据 返回给 mutation 从而对 state 进行修改

什么时候用vuex 呢？

当你连自己写的代码都看不懂的时候。搞不懂组件之间是怎么传值。这个时候就需要用vuex

使用vuex

在main.js 中注入 vuex

 import Vuex from 'vuex'
 Vue.use(Vuex)

在src 下创建文件夹store；创建store.js

import Vue from 'vue'

import Vuex from 'vuex'

Vue.use(Vuex)

 

export default new Vuex.Store({

  state:{

    count:0

  },

  mutations:{

    increment:state => state.count ++,

    decrement:state => state.count --,

  }

或者

mutations: {
  increment (state, n) {
    state.count += n
  }
}
})

在 main.js 中导入

import store from './store/store'
//实例化 store
new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})

接下来就可以直接在其他视图中调用方法了

新建 demo.vue 文件

<template>
    
       <div>
               {{ count }}
               <p>
                <button @click="increment">+</button>
                <button @click="decrement">-</button>
              </p>
               
       </div>
  
</template>
<script type="text/javascript">
    export default{
        name:'sildebar',
        data(){
            return{

            }
        },
        methods:{
            increment(){
              this.$store.commit('increment',n)    //commit方法的第一个参数是要发起的mutation名称，后面的参数均当做额外数据传入mutation定义的方法中。
            },
            decrement(){
              this.$store.commit('decrement')
            }
        },
        computed:{
            count(){
                return this.$store.state.count
            },
        }


    }

</script>

vuex 核心仓库是store（state,mutations,actions,getter,modules）。

action 提交mutation,而不是直接更改状态
action 可以包括异步操作，mutation只能同步
modules  将store分割成模块（modules）,每个模块拥有自己的(state,mutations,actions,getter);方便维护
store 改变状态时通过 （commit） mutations
action  可异步操作

9、接口配置static：config.js asstes: request.js

首先在asstes文件夹下创建request.js文件

import config from '../../../static/JavaScript/config'//引入公共接口前缀
//用户信息(.)
const PersonalInfo=config.baseUrl+'webapi/PersonalCenter/PersonalInfo';
//商品详情(.)
const GetArticleDiscuss=config.baseUrl+'webApi/Discuss/GetArticleDiscuss';


export default{
  PersonalInfo,
  GetArticleDiscuss,
}

再到static文件夹下创建config.js文件用于打包修改和公共前缀配置

// var baseUrl='http://ms.hi-nature.net/';//线上
var baseUrl='/api/';//本地
// var baseUrl="http://192.168.1.131:8080/"
export default{
  baseUrl,
}

使用接口

<!--模板页面-->
<template>
  <div>
    {{msg}}
  </div>
</template>

<script>
  import allApi from '../assets/js/request.js'     //引入request
  export default {
    name: "template",
    data () {
      return {
        msg:'模板'
      }
    },
    components:{//组件

    },
    computed: {//计算属性

    },
    created(){//挂载前


      /*axios请求数据*/
      let self=this;
      //获取地址
      // this.axios.post(allApi.GetArticleDiscuss,{PageIndex: 1, PageSize: 10, ArticleId: 6460}
      // ).then(function (res) {
      //   console.log(res.data)
      //
      // }).catch(function (res) {
      //   console.log(res)
      // });





    },
    methods: {//方法

    },
    mounted () {//挂载完成

    },
    watch:{//监听

    },
  }
</script>

<style scoped>

</style>

10、打包配置路径：【找不到图片路径之类问题】

1、找到 config->index.js里面，如下修改

在这里插入图片描述

2、找到 build->utils.js,在里面加入一句publicPath:’…/…/’,

在这里插入图片描述

配置修改完成，接下来，使用有两种方式，这里一般和文件结构有关，下面是我的文件结构下的使用

在这里插入图片描述

1、图片资源放在 assets->img文件夹下面

img标签引入图片

<img src="../assets/img/loginback.png" class="test-img" />

css使用图片

background: url('../assets/img/loginback.png') no-repeat top left ;

2、图片资源放在static->img文件夹下面

img标签引入图片

`<img src="../../static/img/loginback.png" class="test-img" /><br><img src="static/img/loginback.png" class="test-img" /`>

css使用图片

background: url('../../static/img/loginback.png') no-repeat top left ;

先来个小漩涡

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
搭建Vue脚手架（vue-cli）并创建一个项目【看这一篇就够了】【个人记录，以便后期参考】

1、安装nodejs环境2、安装vue-cli有npm和cnpm两种方式，网上都说cnpm好些，所以我也用的cnpm安装，首先利用淘宝镜像安装cnpmnpm inst...
复制链接

扫一扫