webpack 笔记

 

-----------------------------------------

VUE 实例属性和方法

$set $delete

指令

组件

webpack 启服务运行vue 模块

-----------------------------------------

 

VUE 实例属性和方法

demo12

手动VUE 实例

//6、手动挂载VUE实例
vm.$mount('#my');
//new Vue({}).$mount('#my');

-----------------------------------------

 

$set $delete

demo13

 

 

-----------------------------------------

指令

demo14

v-

都是指令

用来操作dom的

 

 

-----------------------------------------

 

组件

封装代码 增加可复用性

demo15

 

-----------------------------------------

webpack 启服务运行vue 模块

1:28

1.进入项目 cnpm init 一路通 出现 package.json 文件

2.

改配置文件

"main": "main.js",
"scripts": {
"dev": "webpack-dev-server --open --hot --port 8888"
},

3.

Cnpm i vue --S

或者

Cnpm install vue --save

4.

cnpm i -D webpack webpack-dev-server

 

5.

cnpm i -D vue-loader vue-html-loader vue-style-loader　vue-template-compiler

注：vue-template-compiler(预编译模板)

6.

cnpm i -D css-loader file-loader style-loader

 

7.

cnpm i -D babel-loader babel-core babel-preset-env

 

8.配置文件 详情看文档

9. cnpm -install

cnpm install

10.

npm run dev

到这里出错了 ………… 估计是 少了 vue-template-compile 这个

-----------------------------------------

vue-template-compiler

 

"vue-template-compiler": "^2.5.13",

 

cnpm i -D　vue-template-compiler

 

 

cnpm@5.2.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\lib\parse_argv.js)
npm@5.7.1 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npm\lib\npm.js)
node@8.10.0 (F:\node\node.exe)
npminstall@3.3.0 (C:\Users\Administrator\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\index.js)
prefix=C:\Users\Administrator\AppData\Roaming\npm
win32 x64 10.0.16299
registry=https://registry.npm.taobao.org

 

 

-----------------------------------------

npm install webpack-cli --save-dev

cnpm install webpack-cli --save-dev