最近开始学习前端,在创建第一个项目处就卡了很久,看了很多资料后终于运行成功
一:官方文档
vue:https://cn.vuejs.org/
vue-cli:https://cli.vuejs.org/zh/guide/creating-a-project.html#vue-create (这个很重要,就是因为没看这个导致我晕头转向,先看基础再看实例,心急吃不了热豆腐)
element-ui:https://element.eleme.cn/#/zh-CN
二: npm的安装和使用
1.下载npm
https://nodejs.org/en/
左边的是推荐版本,右边的是最新版,一般选左边
下好后,安装一路next到底或者更改安装路径,环境变量会自动安装
安装完成后输入指令检测node和npm版本
2.node_cache和node_global
上面的安装如果选择不安装在C盘,依然会有两个文件目录会安装在C盘如下(没见到npm-cache是因为没有用过,一使用缓存目录就生成了)
如果想把这两个文件夹也放到别的盘可以按下面这么做。
首先在安装nodejs的目录下创建这两个文件夹,比如本人是装在e盘下
然后输入下面两个指令
npm config set prefix "E:\ProgramSoft\NodeJs\node_global"
npm config set cache "E:\ProgramSoft\NodeJs\node_cache"
之后可以输入npm list -global
检测目录是否改变
同时还要添加环境变量
此文件目录(node_global)是存放用npm install xxx -g
即加入了-g
参数安装的包,即全局安装的包
3.设置国内镜像
为了让包能正常下载
①通过下面指令设置npm使用国内镜像
npm config set registry https://registry.npm.taobao.org
使用下面指令验证
npm config get registry
②也可以通过下面指令安装cnpm,以后安装库时用cnpm代替npm,也是使用国内镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用方法和npm一样
cnpm install 包名
三、全局安装脚手架环境
输入指令,此指令是安装vue-cli3的
npm install -g @vue/cli
如果想用vue-cli2,可以用npm install -g vue
四、创建webpack项目
1.先切换到要存放项目的目录
2.创建项目
输入
vue create 项目名
然后进入选项(vue-cli2请使用 vue init webpack 项目名
)
第一个是默认创建,第二个是自定义创建,按上下选择,回车确认,这里选择自定义
下面是弹出的选项,按空格键选择,回车确认
之后会根据你的每个选择继续选择
选完后等待下载完成
3.启动项目
切换到项目文件夹下,输入指令
npm run serve
(如果是vue-cli2,进入文件夹后,先输入npm install
指令安装项目所需包,再使用npm run dev
启动)
浏览器中打开页面,如下表示成功了
五、element-ui
1.安装element-ui
输入指令
npm install element-ui -S
S代表save 安装到本地开发者环境中
2.测试
在main.js文件中加入
main.js位置在 “项目路径/src/main.js”
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)//全局使用ElementUI
再进入helloWorld.vue(项目名.vue),位置在 “项目路径\src\components\项目名.vue”
把代码修改如下
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<el-progress type="circle" :percentage="0"></el-progress>
<el-progress type="circle" :percentage="25"></el-progress>
<el-progress type="circle" :percentage="100" status="success"></el-progress>
<el-progress type="circle" :percentage="50" status="exception"></el-progress>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
data () {
return {
msg: 'Welcome to Your Vue.js App',
}
}
}
</script>
效果如下
之后就开始入坑慢慢学吧