vue-cli創(chuàng)建項目、vue項目目錄結(jié)構(gòu)、 ES6導入導出語法、vue項目編寫規(guī)范

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導入導出語法

4 vue項目編寫規(guī)范

4.1 修改項目
4.2 以后寫vue項目，只需要在固定位置寫固定代碼即可

1 vue-cli創(chuà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標簽中2 css內(nèi)容 ：以后都放在 style 標簽中3 js內(nèi)容:  以后都放在 script標簽中# 使用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  等同于  pythonnpm   等同于    pip2 npm 安裝第三方模塊，速度很慢，淘寶做了個cnpm，以后咱們可以使用cnpm替代npm，會去淘寶鏡像站下載，速度快npm install -g cnpm --registry=https://registry.npm.taobao.org# 以后 使用npm安裝模塊的命令全都換成 cnpm3 在node環(huán)境中裝vue-cli  （類似于裝django）cnpm install -g @vue/cli4 裝完腳手架，會多出一個命令   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_first2 選擇入下圖
3 選擇Babel，Router，vuexBabel：語法轉(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這會啟動出一個服務，直接在瀏覽器中點點擊就可以創(chuàng)建vue的項目

2 vue項目目錄結(jié)

--編寫vue項目，使用編輯器---》pycharm--使用pycharm打開vue項目

2.1 運行vue項目

1.方式一：命令行中 （一定要注意路徑）npm run serve2.方式二：使用pycharm運行  ---》點擊綠色箭頭配置一個啟動腳本，以后點綠色箭頭運行即可

2.2 vue項目的目錄結(jié)構(gòu)

vue_first           # 項目名-node_modules    # 文件夾，放了該項目所有的依賴，很小很多，以后把項目傳給別人，這個要刪除 ，別人拿到執(zhí)行  cnpm install  安裝依賴-public           # 文件夾-favicon.ico  # 小圖標，瀏覽器上面顯示，可以替換-index.html   # spa，這個html是整個項目的一個html  你不要動-src              # 以后動這里面的東西，所有代碼都在者-assets       # 文件夾，放一些靜態(tài)資源，圖片，js，css-components    #  以后小組件寫在里面  xx.vue-HelloWorld.vue  # 默認提供了一個組件-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)，后面學了就會了-README.md   # 項目介紹-package.json  # 重要，存放依賴-vue.config.js  # vue項目的配置文件-package-lock.json # 鎖定文件babel.config.js  # babel的配置，不用管jsconfig.json### 總結(jié)
以后只需要關(guān)注src文件夾下的文件即可

3 es6導入導出語法

# 導出語法   1 項目中：創(chuàng)建包，創(chuàng)建要給文件夾  lin2 在包下創(chuàng)建 package.js3 在文件中寫js代碼var name = 'lqz'function add(a, b) {return a + b}4 默認導出 對象 export default {add:add,name:name}5 命名導出 導出了兩個變量export const name = '彭于晏'export const add = (a, b) => {return a * b}# 導入語法# 默認導出的導入1 在任意的js中import 起個名字  from './lin/package'2 使用導入的包起個名字.導出的字段# 命名導出的導入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
// }// 導出
// 1.默認導出：3中導出法// 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.命名導出：導出了兩個變量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代碼// 導入：默認導出的導入
import lin from './lin/package'
let res = lin.add(3, 5)
console.log(res)
console.log(lin.name)// 導入：命名導出的導入
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

<template><div class="home"></div>
</template><script>
export default {name: 'HomeView',
}
</script>

AboutView.vue

<template><div class="about"><h1>This is an about page</h1></div>
</template>

4.2 以后寫vue項目，只需要在固定位置寫固定代碼即可

1 只需要創(chuàng)建頁面組件IndexView.vue2 里面有三部分2.1 template 必須只能有一個標簽，以后所有的html都寫在這里<template><div class="home"><h1>我是首頁</h1><button @click="handleClick">點我看美女</button></div></template>2.2 script 標簽寫js代碼<script>export default {name: 'HomeView',data(){return {}},methods: {handleClick() {alert('美女')}}}</script>2.3 所有的樣式，寫在<style><style>h1{font-size: 80px;}</style>