Vue-CLI 項目搭建

目錄

Vue-CLI 項目搭建

img

CLI

CLI (@vue/cli) 是一個全局安裝的 npm 包，提供了終端里的 vue 命令。它可以通過 vue create 快速搭建一個新項目，或者直接通過 vue serve 構建新想法的原型。你也可以通過 vue ui 通過一套圖形化界面管理你的所有項目。

沒有安裝好cli腳手架的可以繼續安裝：

👉Vue CLI 官網文檔

👉Node.js安裝詳細教程

安裝好腳手架後，我在安裝的過程中發現使用npm自帶的源太慢了，可以切換源

在nodejs的環境上裝vue-cli：vue腳手架
	-npm install -g cnpm --registry=//registry.npm.taobao.org
  -以後使用cnpm替換掉npm即可：下載速度快
	-cnpm install -g @vue/cli  # 速度慢，淘寶寫了工具 cnpm，完全替換npm的功能，使用cnpm回去淘寶鏡像站下載，速度快

我裝的最新版本nodejs，如果想裝舊版本參考下文檔：

👉舊版本：//nodejs.org/zh-cn/download/releases/

Node第一個程序：Hello world

image-20220417185340310

CLI創建項目

方式一：命令行創建-vue create

運行以下命令來創建一個新項目：

vue create item

選擇Manually，手動選擇功能，然後回車

image-20220417190228344

使用空格選擇，Babel、Router、Vuex

Babel：es版本轉換，比如es6語法在瀏覽器不支持，那麼它會幫我們轉換到支持的版本

Router：路由跳轉

Vuex：狀態管理器(存數據)

image-20220417190714349

Vue版本選擇

image-20220417190747524

Router選擇

image-20220417191014734

選擇package管理

image-20220417191054413

保存配置選擇作為歷史選擇

image-20220417191218959

配置名

image-20220417191313779

成功：不成功建議使用管理員創建就行了

image-20220417195058857

方式二：使用圖形化界面-vue ui

可以通過 vue ui 命令以圖形化界面創建和管理項目：

vue ui

上述命令會打開一個瀏覽器窗口，並以圖形化界面將你引導至項目創建的流程

圖形化界面預覽

如何刪除CLI預設

image-20220417205822528

這裡的預設不需要如何刪除？按照如下路徑找到.vuerc打開刪除即可

C:\Users\3547

打開.vuerc

image-20220417210038281

image-20220417210224323

再次創建項目就沒有預設了

image-20220417210252501

Vue項目目錄及運行

運行

  • 運行項目方式一：在項目路徑下輸入npm run serve

image-20220417210628295

image-20220417210709051

  • 運行項目方式二：pycharm運行

image-20220417211051592

image-20220417211111561

package.json中

"scripts": {
    "serve": "vue-cli-service serve",  # 運行項目
    "build": "vue-cli-service build",  # 編譯項目成html，css，js
    "lint": "vue-cli-service lint"     # 代碼格式化
},

目錄

image-20220417204504511

# 目錄介紹
	-myfirstvue   # 項目名字
  	-node_modules  # 放着當前項目所有的依賴，可以刪除，刪除項目運行不了了,npm install 把該項目的依賴再裝上，把項目發給別人，提交到git上，文件夾要刪掉
    -public   # 文件夾
    	-favicon.icon  # 小圖標
      -index.html   # 單頁面開發，整個項目就這一個頁面，以後不要動
    -src     # 以後咱們都是在這裏面寫東西
    	-assets  # 放靜態資源，圖片，js，css
      -components  # 組件，xx.vue組件，小組件，給頁面組件用
      	-HelloWorld  # 提供的默認組件，示例
      -router     # vue-router就會有這個文件夾
      	-index.js   # vue-router的js代碼
      -store      # vuex 就會有這個文件夾
      	-index.js   # vuex 的js代碼
      -views     # 組件，頁面組件
      	-About
        -Home   # 默認提供了示例組件
      -App.vue   # 根組件
      -main.js   # 項目的入口於
	 -.gitignore   # git的忽略文件
   -babel.config.js  # babel配置
   -package.json  # 項目的所有依賴，類似於  requirements.txt,不要刪，npm install根據這個文件下載第三方模塊
  -vue.config.js  # vue的配置

es6語法之導入導出

類似python中的導入包、模塊，JS模塊化開發，在其他JS中導入使用

導入語法：

import 自定義名字 from '路徑'
Eg：import Vue from 'vue'  //內置的
//如果是自定義的寫自己的路徑

導出語法：

導出單個對象：export default 方法名/變量名 
eg：export default 變量名
    export default 方法名
導出多個對象：export default {key:value,key1:value1···}   //key自定義名字，value對象js文件中的方法名或變量名
eg：export default {name:name,printName:printName}
//key值也可以省略
export default {value,value1···}

注意：必須先導出之後才能導入使用

demo：

//導出：
let name = 'HammerZe'
function printName() {
    console.log(name)
}
// 把對象導出
export default {name:name,printName:printName}

//導入
//導出多個對象再導入使用的時候就可以通過對象.方法/變量使用
import settings from '路徑'
settings.name
settings.printName()

導入導出包

導入出包和上面一樣，導入包只導入到包這一層就可以了，比如：info包下的info.js文件導出，導入的路徑只寫到info就可以了

//導出
let name = 'HammerZe'
let age = 18
export default {name,age}

//導入
import info from  ./info
info.name
info.age

定義並使用組件

定義組件包括以下三部分：

第一部分：
-<template></template>  # 寫原來模板字符串``,html內容
第二部分：
-<script></script>      # 寫export default導出的對象
eg：
-<script>
    export default {
      data(){retrun {
        name:'mycomponent'
      }},
      methods:{},
    }
</script>
第三部分：
-<style scoped>   # scoped 樣式只在當前組件中生效
</style>

image-20220417222323253

組件在項目中如何使用，如下：

自定義組件mycomponent.vue

<template>
<div >
  <h2>{{name}}</h2>
  <button @click="handleClick">百度一下</button>
</div>
</template>

<script>
export default {
  name: "mycomponent",
  data(){
    return {
      name:'HammerZe'
    }
  },
  methods:{
    handleClick(){
      window.location.href="//www.baidu.com"
    }
  }

}
</script>

<style scoped>
h2{
  background-color: tomato;
  align-content: center;
}
button{
  background-color: aqua;
}
</style>

重寫AboutView.vue顯示自定義組件

<template>
  <div>
<!--用在div里-->
    <mycomponent></mycomponent>
  </div>
</template>

<script>
// @ is an alias to /src
import mycomponent from '@/components/mycomponent.vue'
export default {
  name: 'AboutView',  //組件名一般和文件名一致
  components: {
    //註冊自定義組件
    mycomponent
  }
}
</script>

CLI自定義組件

集成Bootstrap，jQuery，Elementui

下載Bootstrap和jQuery

npm install bootstrap@3 -S
npm install jquery -S

image-20220417230329289

image-20220417230344433

配置Bootstrap和jQuery

Bootstrap配置

# 在main.js中配置
  	// bootstrap的配置
    import 'bootstrap'
    import 'bootstrap/dist/css/bootstrap.min.css'

jQuery配置

# vue.config.js中配置
 const {defineConfig} = require('@vue/cli-service')
    const webpack = require("webpack");
    module.exports = defineConfig({
        transpileDependencies: true,
        configureWebpack: {
            plugins: [
                new webpack.ProvidePlugin({
                    $: "jquery",
                    jQuery: "jquery",
                    "window.jQuery": "jquery",
                    "window.$": "jquery",
                    Popper: ["popper.js", "default"]
                })
            ]
        },
    })

下載elementui

npm install element-ui -S

image-20220417231242810

配置elementui

# 在main.js 配置

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

image-20220417231224204

使用在組件中使用就可以了~

使用axios與後端交互

# 第一步，安裝
    npm install axios -S
    
# 第二步：main.js 配置
# 導入
import axios from 'axios'
# 類的原型中放入變量
Vue.prototype.$axios = axios;

# 第三步：在任意組件中使用
# this.$axios   就是axios對象
this.$axios.get().then(res=>{})

image-20220417232410113

如果，沒有在main.js中配置，使用如下

import axios from 'axios'
axios.get('').then(res=>{})
Tags:

VirMach 便宜 VPS

QNews

QNews