vue學習筆記1

1.使用vue構建項目
1.1 直接引用,使用script標籤
1.2 使用cdn https://cdn.bootcss.com/vue/2.2.2/vue.min.js https://unpkg.com/vue/dist/vue.js,
1.3 npm方法,安裝node(node官網),cnpm(npm install -g cnpm --registry=http://registry.npm.taobao.org),vue-cli(腳手架工具npm install -g vue-cli )
1.4 vue init webpack newvue使用webpack構建項目newbue爲項目名
1.5 目錄:
build:最終發佈的代碼的存放位置。
config:配置路徑、端口號等一些信息,我們剛開始學習的時候選擇默認配置。
node_modules:npm 加載的項目所需要的各種依賴模塊。
src:這裏是我們開發的主要目錄(源碼),基本上要做的事情都在這個目錄裏面,裏面包含了幾個目錄及文件:
assets:放置一些圖片,如logo等
components:目錄裏放的是一個個的組件文件
router/index.js:配置路由的地方
App.vue:項目入口組件(跟組件),我們也可以將組件寫這裏,而不使用components目錄。主要作用就是將我們自己定義的組件通過它與頁面建立聯繫進行渲染,這裏面的必不可少。
main.js :項目的核心文件(整個項目的入口js)引入依賴包、默認頁面樣式等(項目運行後會在index.html中形成一個app.js文件)。
static:靜態資源目錄,如圖片、字體等。
test:初始測試目錄,可刪除
.XXXX文件:配置文件。
index.html:html單頁面的入口頁面,可以添加一些meta信息或者同統計代碼啥的或頁面的重置樣式等。
package.json:項目配置信息文件/所依賴的開發包的版本信息及所依賴的插件信息。
README.md:項目的說明文件。
webpack.config.js:webpack的配置文件,把.vue的文件打包成瀏覽器能讀懂的文件。
.babelrc:是檢測es6語法的文件的配置
.getignore:忽略文件的配置(比如模擬本地數據mock不讓他在get提交/打包上線的時候忽略不使用可在這裏配置)
.postcssrc.js:前綴的配置
.eslintrc.js:配置eslint語法規則(在這裏面的rules屬性中配置讓哪個語法規則失效)
.eslintignore:忽略eslint對項目某些文件的語法規則的檢查
1.6 進入項目,下載依賴包 npm install (運行項目必須先下載依賴文件)
1.7 使用 npm run dev 運行項目
1.8 使用 npm run build 打包項目,會生成一個dist文件夾,文件夾內是打包後的代碼

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章