1 vue-cli創(chuàng)建項目
1.1 vue-cli 命令行創(chuàng)建項目
1.2 使用vue-cli-ui創(chuàng)建
2 vue項目目錄結(jié)構(gòu)
2.1 運行vue項目
2.2 vue項目的目錄結(jié)構(gòu)
3 es6導(dǎo)入導(dǎo)出語法
4 vue項目編寫規(guī)范
4.1 修改項目
4.2 以后寫vue項目，只需要在固定位置寫固定代碼即可
1 vue-cli創(chuàng)建項目
# 單頁面應(yīng)用：spa
-以后vue項目就只有一個 xx.html 頁面
-定義很多組件，不可能都寫在 xx.html中把
# 單文件組件（一個組件一個文件）
https://v2.cn.vuejs.org/v2/guide/single-file-components.html #ad
# 一個組件中有的東西
1 html內(nèi)容：以后html都放在 template標(biāo)簽中
2 css內(nèi)容 ：以后都放在 style 標(biāo)簽中
3 js內(nèi)容: 以后都放在 script標(biāo)簽中
# 使用vue-cli 創(chuàng)建vue項目，才能使用 單文件組件
-vue腳手架：創(chuàng)建出vue的項目，里面帶了很多基礎(chǔ)代碼
-類似于django-admim命令，可以創(chuàng)建出django項目
# vue-cli腳手架，
# vue2中使用創(chuàng)建vue項目的軟件必須用vue-cli
# vue3中可以使用vue-cli，也可也使用vite創(chuàng)建，vite號稱新一代的構(gòu)建工具
# 使用vue-cli創(chuàng)建vue項目 步驟
1 vue-cli是個軟件，運行在nodejs環(huán)境中，安裝nodejs
-下載地址：https://nodejs.p2hp.com/download/
-類似于python解釋器，一路下一步安裝---》選擇安裝位置---》添加到環(huán)境變量(以后再任意位置執(zhí)行node或npm都會找到)
-查看node版本
node -v
-安裝完，釋放兩個可執(zhí)行文件
node 等同于 python
npm 等同于 pip
2 npm 安裝第三方模塊，速度很慢，淘寶做了個cnpm，以后咱們可以使用cnpm替代npm，會去淘寶鏡像站下載，速度快
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 以后 使用npm安裝模塊的命令全都換成 cnpm
3 在node環(huán)境中裝vue-cli （類似于裝django）
cnpm install -g @vue/cli
4 裝完腳手架，會多出一個命令 vue 用來創(chuàng)建vue項目 等同于djagno-admin命令
5 使用腳手架，創(chuàng)建vue項目
vue create 項目名
# vue create myfirstvue
1.1 vue-cli 命令行創(chuàng)建項目
1 vue create 項目名
vue create vue_first
2 選擇入下圖
3 選擇Babel，Router，vuex
Babel：語法轉(zhuǎn)換
Router：頁面跳轉(zhuǎn) 路由效果
vuex：狀態(tài)管理器，存儲數(shù)據(jù)的
3 選vue版本
4 選package.json
5 之前的設(shè)置，保存與不保存都可以
...等待即可
1.2 使用vue-cli-ui創(chuàng)建
按住win+R,打開cmd窗口，然后輸入cd 路徑：
再輸入 vue ui
這會啟動出一個服務(wù)，直接在瀏覽器中點點擊就可以創(chuàng)建vue的項目
2 vue項目目錄結(jié)
--編寫vue項目，使用編輯器---》pycharm
--使用pycharm打開vue項目
2.1 運行vue項目
1.方式一：命令行中 （一定要注意路徑）
npm run serve
2.方式二：使用pycharm運行 ---》點擊綠色箭頭
配置一個啟動腳本，以后點綠色箭頭運行即可
2.2 vue項目的目錄結(jié)構(gòu)
vue_first # 項目名
-node_modules # 文件夾，放了該項目所有的依賴，很小很多，以后把項目傳給別人，這個要刪除 ，別人拿到執(zhí)行 cnpm install 安裝依賴
-public # 文件夾
-favicon.ico # 小圖標(biāo)，瀏覽器上面顯示，可以替換
-index.html # spa，這個html是整個項目的一個html 你不要動
-src # 以后動這里面的東西，所有代碼都在者
-assets # 文件夾，放一些靜態(tài)資源，圖片，js，css
-components # 以后小組件寫在里面 xx.vue
-HelloWorld.vue # 默認(rèn)提供了一個組件
-router # 裝了vueRouter就會有這個文件夾，如果不裝就沒有，現(xiàn)在不用關(guān)注
-index.js
-store # 裝了vuex就會有，不裝就沒有
-index.js
-views # 文件夾，里面放了所有頁面組件
-AboutView.vue # 首頁組件
-HomeView.vue # 關(guān)于組件
- App.vue # 跟組件
- main.js # 項目啟動的入口文件，核心
-.gitignore # git相關(guān)，后面學(xué)了就會了
-README.md # 項目介紹
-package.json # 重要，存放依賴
-vue.config.js # vue項目的配置文件
-package-lock.json # 鎖定文件
babel.config.js # babel的配置，不用管
jsconfig.json
### 總結(jié)
以后只需要關(guān)注src文件夾下的文件即可
3 es6導(dǎo)入導(dǎo)出語法
# 導(dǎo)出語法
1 項目中：創(chuàng)建包，創(chuàng)建要給文件夾 lin
2 在包下創(chuàng)建 package.js
3 在文件中寫js代碼
var name = 'lqz'
function add(a, b) {
return a + b
}
4 默認(rèn)導(dǎo)出 對象
export default {
add:add,
name:name
}
5 命名導(dǎo)出 導(dǎo)出了兩個變量
export const name = '彭于晏'
export const add = (a, b) => {
return a * b
}
# 導(dǎo)入語法
# 默認(rèn)導(dǎo)出的導(dǎo)入
1 在任意的js中
import 起個名字 from './lin/package'
2 使用導(dǎo)入的包
起個名字.導(dǎo)出的字段
# 命名導(dǎo)出的導(dǎo)入
1 在任意的js中
import {name,add} from './lin/package'
2 直接用即可
3.1 自建文件lin/package.js
// 自定義變量和方法
// let name = 'lin'
// function add(a, b) {
// console.log(name)
// return a + b
// }
// 導(dǎo)出
// 1.默認(rèn)導(dǎo)出：3中導(dǎo)出法
// 1.1
export default {
name,
add
}
// 1.2
// export default {
// name: name,
// add: add
// }
// 1.3
// export default {
// name: name,
// add: function (a, b) {
// return a + b
// }
// }
// 2.命名導(dǎo)出：導(dǎo)出了兩個變量
export const name = '彭于晏'
// export const add=function (a, b) {
// return a * b
// }
// 改為箭頭函數(shù)
export const add = (a, b) => a * b
3.2 main.js
'''在main.js文件中加入下面代碼'''
// console.log('我執(zhí)行了')
// 演示：使用剛剛寫的包中的js代碼
// 導(dǎo)入：默認(rèn)導(dǎo)出的導(dǎo)入
import lin from './lin/package'
let res = lin.add(3, 5)
console.log(res)
console.log(lin.name)
// 導(dǎo)入：命名導(dǎo)出的導(dǎo)入
import {add, name} from './lin/package'
console.log(add(5, 6))
console.log(name)
4 vue項目編寫規(guī)范
4.1 修改項目
App.vue
<template>
<div id="app">
<router-view></router-view>
</div>
</template>
HomeView.vue文章來源：http://www.zghlxwxcb.cn/news/detail-730938.html
<template>
<div class="home">
</div>
</template>
<script>
export default {
name: 'HomeView',
}
</script>
AboutView.vue文章來源地址http://www.zghlxwxcb.cn/news/detail-730938.html
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
4.2 以后寫vue項目，只需要在固定位置寫固定代碼即可
1 只需要創(chuàng)建頁面組件
IndexView.vue
2 里面有三部分
2.1 template 必須只能有一個標(biāo)簽，以后所有的html都寫在這里
<template>
<div class="home">
<h1>我是首頁</h1>
<button @click="handleClick">點我看美女</button>
</div>
</template>
2.2 script 標(biāo)簽寫js代碼
<script>
export default {
name: 'HomeView',
data(){return {
}},
methods: {
handleClick() {
alert('美女')
}
}
}
</script>
2.3 所有的樣式，寫在<style>
<style>
h1{
font-size: 80px;
}
</style>
到了這里，關(guān)于vue-cli創(chuàng)建項目、vue項目目錄結(jié)(運行vue項目)、ES6導(dǎo)入導(dǎo)出語法、vue項目編寫規(guī)范的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
