vue-cli 安装 2020最新 vue 4.0安装

vue-cli 安装 2020最新 vue 4.0安装

0.node.js 安装

百度搜索node.js，下载最新版  安装就行了

1.安装 cnpm

npm install -g cnpm --registry=是全局安装的意思

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.升级和卸载

在看文档uninstall vue-cli -g卸载vue，然后再安装，但是vue -V时依然是2.9.6版本：

第一步：npm config get registry

第二步：npm config set registry 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://baidu.com";//全局函数Vue.prototype.mainURL_f=function (name){ return name+"调用了mainURL_f"};var vm=new Vue({ data: { site: "菜鸟教程", url: "runoob.com", alexa: "10000"},mounted(){ console.log(this.site); console.log(this.mainURL); }, router, render: h => h(App)}).$mount('#app')

App.vue

Home.vue

如果你是 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:​​你输入【vbase】然后回车

他就会生成生成

第三：格式化代码（美化代码）

vue-format

A beautify extension for .vue file

第四：所有带“星”的都要安装

Vue2.0 新手入门 — 从环境搭建到发布

​​如何定义全局变量 全局函数

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。