0.node.js 安装
百度搜索node.js，下载最新版 安装就行了
1.安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
-g 是全局安装的意思
2.安装 vue-cli
3.0之前的版本
cnpm install vue-cli -g
4.0之后的版本
cnpm install -g @vue/cli
3.初始化项目
3.1命令新建项目
3.0之前的版本
vue init webpack 项目名
4.0开始
vue create 项目名
然后 选中-》手动
manually select features
推荐勾选，按【空格】勾选
(*)Babel
( )TypeScript
(*)Progressive Web App (PWA)Support
(*)Router
( )Vuex
(*)CSS Pre-processors
( )Linter / Formatter
( )Unit Testing
( )E2E Testing
这里选择 n
use history mode for router? (Y/n)
接着选择
In package json
他会问你是否保存 选择n
Save this as a preset for future projects?(Y/n)
安装成功后：就可以把代码文件夹 放到编辑器里面了
3.2 你还可以通过vue UI 可视化新建项目
vue ui
.
Linter/Formatter 这最好不好勾选， 因为，完全规范的代码写起来太累了
这种方式创建项目比较慢
4.进入到项目目录，安装模块包
cnpm install 模块里名
install 可以简写成 i
5.启动项目
3.0之前的版本
cnpm run dev
4.0之后的版本
cnpm run serve
tip:如果你的编辑器是 VS cord 可以 ctrl+j调取【终端】 输入命令
6.发布
npm run build
发布后会项目里 会多一个文件夹 dist,
部署的时候，只需要 部署dist文件夹即可
7.升级和卸载
在看文档https://cli.vuejs.org/zh/guide/installation.html中，按步骤升级vue；
于是就先通过 npm uninstall vue-cli -g卸载vue，然后再安装，但是vue -V时依然是2.9.6版本：
第一步：npm config get registry
第二步：npm config set registry https://registry.npm.taobao.org
第三步：npm i -g @vue/cli
完美，安装成功！
export default{
data(){
return{
//一些变量
}
},
//视图渲染完毕后，会调用此方法
mounted(){
//调用自定义方法
this.getUsers();
},
//你的方法
methods:{
//自定义方法
getUsers(){
/*
*方法体
*/
}
}
}
声明全局变量和全局函数
mian.js
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
Vue.config.productionTip = false;
//全局变量
Vue.prototype.mainURL="htttp://www.baidu.com";
//全局函数
Vue.prototype.mainURL_f=function (name){
return name+"调用了mainURL_f"
};
var vm=new Vue({
data: {
site: "菜鸟教程",
url: "www.runoob.com",
alexa: "10000"
},
mounted(){
console.log(this.site);
console.log(this.mainURL);
},
router,
render: h => h(App)
}).$mount('#app')
App.vue
<script>
export default {
mounted(){
console.log("====App.vue====");
console.log(this);
console.log("App.vue:"+this.site);
console.log("App.vue:"+this.mainURL);
console.log("App.vue:"+this.mainURL_f("App.vue"));
}
}
</script>
Home.vue
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'Home',
mounted(){
console.log("====home.vue====");
console.log(this);
console.log("home.vue:"+this.site);
console.log("home.vue:"+this.mainURL);
console.log("App.vue:"+this.mainURL_f("home.vue"));
},
components: {
HelloWorld
}
}
</script>
如果你是 vs code编辑器
需要安装VUE 的一下组建
第一：高亮
vue
Save this as a preset for future projects?(Y/n)
第二：增强代码片段
Vue VSCode Snippets
Snippets that will supercharge your Vue workflow
介绍url:https://marketplace.visualstudio.com/items?itemName=sdras.vue-vscode-snippets
例如：安装后 你输入【vbase】然后回车
他就会生成生成
<template>
<div>
</div>
</template>
<script>
export default {
}
</script>
<style lang="scss" scoped>
</style>
第三：格式化代码（美化代码）
vue-format
A beautify extension for .vue file
第四：所有带“星”的都要安装
Vue2.0 新手入门 — 从环境搭建到发布
https://www.runoob.com/w3cnote/vue2-start-coding.html
生命周期钩子
https://cn.vuejs.org/v2/api/#选项-生命周期钩子
生命周期图示
https://cn.vuejs.org/v2/guide/instance.html#生命周期图示
在vue项目中 如何定义全局变量 全局函数
