1.确保已安装node

node下载地址直接点链接（下载 | Node.js 中文网）

安装完后打开命令窗口输入：node -v 查看安装与否及版本详情

因为 npm 默认的官方地址是外网的，可能无法下载成功，如果出现下载卡顿或失败时，可通过修改镜像下载，命令是：

npm config set registry https:/ / registry.npm.taobao.org/

2.全局安装vuecli 脚手架

继续在上述命令窗口输入：npm i -g @vue/cli 如下显示

ps mac命令: sudo npm i -g @vue/cli

安装后若出现下列文字，按提示操作即可：

检查vue 版本的命令：vue -V

3.安装vue项目包

在命令窗口输入：vue create 文件名名自取如下显示：

4.项目包文件介绍

（在vscode中直接开启脚手架生成的项目包，能够识别出并给出更多代码提示）

5.关于 main.js 文件

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引入才能触发文件中的代码
// 简化: 后缀名.js可以省略,  单纯为了触发,不用起名字
// 所以不需要写 import xxx from xxx 的方式
import './utils/axios'Vue.config.productionTip = false// 渲染 App.vue 文件, 到 id=app 的元素里
new Vue({// el:"#app",router,store,render: h => h(App),
}).$mount('#app')
// new Vue({配置项}).挂载到('#app')
// $mount 和 el 是同函数的两种写法

6.关于app.js

<template><div><!-- 两种快捷生成方式 -- 前提是装插件 --><!-- <  或 vbase --><!-- 自动格式化: B站视频有介绍 - 小新8022 --><h1>Hello World!</h1><!-- template: 虚拟的包围, 代表此处书写的是HTML代码 --><!-- 严格要求: 只能有一个子元素 --><h2>{{ msg }}</h2><button @click="updateAge">age:{{ age }}</button><h2>年龄翻倍:{{ age_db }}</h2></div><!-- <div></div> -->
</template><script>
// 新的模块语法:
// 旧语法:
// 导出: module.exports = {}
// 导入: const xxx = require(文件路径)
//
// 新语法:
// 导出: export default {}
// 导入: import xxx from '文件路径'export default {// 此{}中书写之前 new Vue() 的各种配置项// vdata// 完整格式  data: function(){ return {} }// 此处 data 的值是函数类型, 原因和 组件复用性有关 -- 后期讲// 暂时记住是固定用法即可data() {return {msg: 'Welcome To Vue',age: 18,}},// vmethodmethods: {updateAge() {this.age++},},// 计算属性: 特点 是函数 但是不需要() 就能调用computed: {age_db() {return this.age * 2},},
}
</script><style lang="scss" scoped></style>

电脑首次安装vue2过程/步骤（vue-cli）相关推荐

Vue2 环境下安装Vue3 ，同一台电脑同时安装vue2 和vue3
目前大多数老的项目还是以vue2.0版本为主,在vue3的环境下vue2的项目又不能运行,因此Vue2 和Vue3两个版本同时存在显得尤为重要,本博客为转发博客,非常详细博客1:https://bl ...
【vue】安装新版本vue-cli：@vue/cli
前言 nodjs v14.16.1 (在Windows系统安装Nodejs.在Linux系统安装Nodejs) vue-cli 版本 vue-cli 已分为2个版本: @vue/cli,这是新版本(本 ...
在电脑上安装Linux系统步骤
1. 准备1个U盘(一需根据系统镜像文件的大小而定): 2. 在可以上网.没有病毒的正常windows系统的电脑上,按以下步骤制作系统安装U盘: 2.1 下载UUI软件: 2.2 到linux发行版官 ...
在电脑上安装python的步骤-python中pygame安装过程（超级详细）
安装时是需要设置python环境变量的,下载python的时候底下有个小框框(没有默认选中) Add Python 3.7 to PATH需要选择的,如果没有选择的话,需要自己设置,我一般比较懒,卸载 ...
win7,64位电脑eclipse安装SVN插件步骤
注意事项有两点:一是选择1.8版本,二是下载时,contract-那个选项不要打勾!!! Links for 1.8.x Release: Eclipse update site URL: http: ...
安装Vue CLI项目（Vue2.0）
一.Vue CLI脚手架(Vue2.0) Vue CLI官方文档:官方文档 1.什么是脚手架命令行界面(英语:command-line interface,缩写:CLI)是在图形用户界面得到普及 ...
vue/cli 和 vue 版本对应及安装
文章目录 Vue Cli 使用方式: 关于Vue Cli版本介绍 @vue/cli 安装: 版本号对应查看vue和@vue/cli版本: Vue Cli Vue CLI = Vue + 一堆的js插 ...
解决@vue/cli 创建项目是安装chromedriver时失败的问题
最近在使用新版vue的命令行工具创建项目时,安装chromedriver老是失败,导致后面的步骤也没有进行.网上搜索了一下,全是使用工作中常见问题汇总及解决方案 npm install chrome ...
vue搜不到c_vue不是内部命令、安装@vue/cli失败、找不到vue.cmd文件等问题的解决方法...
最近打算用vue-cli写项目,发现用官网提供的安装方式npm install @vue/cli -g怎么都安装不上,一直报如下错误 EPERM: operation not permitted, r ...

电脑首次安装vue2过程/步骤（vue-cli）