前端学习路线:从小白到大神的一步之遥
工具 Vue CLI
Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统。
CLI(全称:command-line interface,命令行界面),在熟记命令的前提下,使用命令行界面往往要较使用图形用户界面的操作速度要快。
Node.js安装
npm安装
首先:先从nodejs.org中下载nodejs
node.js 中文网
node.js 外网
找到安装路径 文件 然后双击安装,在安装界面一直Next,直到Finish完成安装。
node.js 安装完成 自动安装npm
打开控制命令行程序(CMD),检查是否正常
直接使用npm 的官方镜像访问外网比较慢,然后就可以使用淘宝 NPM 。
- 使用阿里定制的cnpm命令行工具代替默认的npm,输入以下代码:npm install -g cnpm --registry=https://registry.npm.taobao.org
- 检查是否安装成功:$ cnpm -v
- 安装成功之后,以后安装依赖包的方式和npm的是一样的,只是npm的命令换成是cnpm,这样就可以使用cnpm 命令来安装模块了。
[ 注:npm是下载完node.js自带的,或者可以用yarn(官网下载 )。]
安装Vue CLI 脚手架
1.全局安装 vue-cli:cnpm install vue-cli -g
( cnpm i -g vue-cli 安装老版本~~~只有 4 以上版本脚手架才可以支持 Vue3 )
1.1 .旧版本的删除:cmd 命令行
npm uninstall vue-cli -g
1.2.新版本的安装:cmd 命令行
npm install -g @vue/cli
1.3. 安装成功与否的检测方法
vue --version
1.4. 安装报错Install fail! Error: GET https://registry.npmmirror.com/vue-cli-g response 404 status
在计算机中搜索cmd,找到命令提示符
以管理员身份运行后再次安装
2.检查 vue 是否安装成功(安装成功后会显示版本号):vue -V
3.选定路径,新建vue项目
方法一:在桌面上打开cmd,然后cd目录路径
方法二:直接在需要创建文件的目录下 打开cmd
创建完成之后按各自需求选择
上下键:选择 回车:确定下一步 空格:选项选择或取消
回车下一步
接着 选择y或 n 都可 回车
等待完成…(如果长时间不进行,网路出现问题,可以 Ctrl+c 结束当前 从新开始)
到此为止 ,一个简单的项目就创建完成了。
接下来用编辑器(这里用的Visual Studio Code)打开文件看一下文件组成
Visual Studio Code需要安装插件Vetur
vetur的特性: 语法高亮, 代码片段(emmet给我的感觉是一个写好了的snippet), 质量提示&错误、格式化/风格、智能提示等。
安装路由router
创建路由时安装 vue add router
import VueRouter from 'vue-router'
Vue.use(VueRouter)
安装elementUI
npm i element-ui -S
main.js引入:
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI); // 即可直接使用文档
安装axios
cnpm i axios --save
在 main.js 中引入 axios
import axios from 'axios'
Vue.prototype.$axios = axios
在组件中使用 axios
<script>
export default {
mounted(){
this.$axios.get('/goods.json').then(res=>{
console.log(res.data);
})
}
}
</script>
(扩展知识)修改npm默认安装路径并配置环境变量 或 直接配置环境变量
修改NPM全局模式的默认安装路径## 标题
引用 “柯晓楠” 文章
修改npm默认源(修改npm全局安装路径)
引用“鹿茗๓”文章