安装node以及vue-cli4.0创建项目
我是一个做C#后端的新手小白,最近在学习vue,由于老是记不住,我就来记录一下这个过程
一、安装node.js
1.安装vue脚手架之前,首先要安装vue推荐的使用环境node.js
在Windows上安装Node.js,官网下载地址:
http://nodejs.cn/download/
注意:安装路径最好不要带汉字和空格 安装完成之后,验证是否安装成功,可以使用 node –v 命令来查看版本
2.更改镜像
默认的npm比较慢,推荐安装淘宝的镜像:
使用命令:
npm install -g cnpm --registr=https://registry.npm.taobao.org
执行成功之后我们就可以使用 cnpm
了
二、安装vue脚手架
1.vue的环境装好之后,开始安装vue cli脚手架
注意:(此安装都会默认安装在C盘目录下,若想自己修改安装路径 ,请查找资料)
安装了淘宝镜像可以使用
cnpm install –g @vue/cli
未安装淘宝镜像请使用
npm install –g @vue/cli
使用以上命令安装的都是最新版本vue脚手架,指定安装版本使用:
cnpm install –g @vue/cli@版本号
2.查询vue是否成功安装
等待安装完成后,可以使用
vue –V
可以查看安装的vue版本,来检测是否安装成功
三、使用脚手架创建项目
1.创建项目
注意:可以使用vue ui图形化的方式创建项目 可以看看这位大哥使用 vue ui的方式创建项目,感觉还可以;
访问地址: https://blog.csdn.net/weixin_43417252/article/details/103730475
首先创建一个空白文件夹,切换到此文件夹目录
使用vue create 来创建项目
(不知道前面的淘宝镜像是不是还需要什么配置,这里第一次会问我是否选择淘宝镜像,我这里选择了是)
vue create 你的项目名称
vue create vue-test
我选择的是自定义配置
2.选择配置
勾选自己需要的配置(下面是勾选了我自己需要的配置):
注意:按空格键是选中,不要按回车键,勾选完再使用回车键下一步
这里会询问你路由的模式,我选择的是默认
配置勾选的不同,后面会具体询问你的操作
3.css预编译
选择CSS预编译,根据需要自己选择,我选择的是 Sass/SCC(with node-sass)
4.生成配置文件
In dedicated config files ——为每个配置生成单独的配置文件
In package.json ——全部配置放到一个配置文件
5.保存模板
询问是否保存当前的配置模板(保存后方便下次直接使用此前选用的配置)
注意:如果没有保存模板则忽略这一步
为此配置创建一个名称
6.漫长的等待
剩下的就是一个漫长的下载的过程了
7.安装出错
在安装sass的时候,可能会因为当前网络环境的问题导致出错
安装出错了
可以在安装sass的还没有报错的时候,按( Ctrl+C)终止操作;
8.解决出错
注意:已经步入到安装出错了的过程,以下操作也适用
终止安装后及出错后,打开项目文件夹, 删除node_modules文件夹
控制台定位到当前项目文件夹,输入 cnpm i
,重新下载依赖配置
cd .\vue-test
等待下载完成后,项目就搭建成功啦!!!
四、运行项目
1.启动项目
下载完成之后,在当前项目文件夹路径下输入
cnpm run serve
启动成功会显示这个样子
在浏览器输入以上地址回车运行项目
http://localhost:8080/
当看到显示以下页面,表示项目已经启动成功了
至于要用什么编辑器打开项目,就看自己的啦啦啦啦啦
教程已写成Word文档,需要进入我的主页下载。
结语
到这里,整个笔记就结束啦;本人也是一个新手小白,很多写的不好,可能在上面也写的有错误的地方请多多包涵,欢迎指点不足之处!!!!