使用Vue cli创建Vue项目
第一步:安装node.js
安装node.js,从node.js官网下载并安装node,安装过程很简单,一路“下一步”就可以了(傻瓜式安装)。安装完成之后,打开命令行工具(win+r,然后输入cmd),输入 node -v
,如下图,如果出现相应的版本号,则说明安装成功。
第二步:安装淘宝镜像
打开命令行工具,把这个(npm install -g cnpm --registry=
https://registry.npm.taobao.org)复制(这里要手动复制就是用鼠标右键那个,具体为啥不多解释),安装这里是因为我们用的npm的服务器是外国,有的时候我们安装“依赖”的时候很很慢很慢超级慢,所以就用这个cnpm来安装我们说需要的“依赖”。安装完成之后输入 cnpm -v
,如下图,如果出现相应的版本号,则说明安装成功。
第三步:安装vue-cli脚手架构建工具
打开命令行工具输入:npm install vue-cli -g
,安装完成之后输入 vue -V
(注意这里是大写的“V”),如下图,如果出现相应的版本号,则说明安装成功。
通过以上三步,我们需要准备的环境和工具都准备好了,接下来就开始使用vue-cli来构建项目。
创建项目:vue create 加项目名
vue create hello-app
选择预设
项目构建成功
我们使用yarn启动项目
yarn
yarn serve
安装成功
引入element ui库
vue add element-plus
选择全面引用
语言选择zh-cn
关闭 serve。重新启动
yarn serve
在src文件夹下创建scss文件夹
移动文件至scss文件夹
修改scss文件路径
更改App.vue,作为程序主入口
路由文件
现在就可以访问两个页面了, / 和/about这两个页面