day1:node安装+项目创建
一、安装node
1、http://nodejs.cn/download/中文网下载node工具,直接下一步式的安装。
二、验证安装
1、win+r 输入cmd,分别运行一下,node -v npm -v
2、安装cnpm,npm install -g cnpm --registry=https://registry.npm.taobao.org
3.安装vue-cli 。cnpm install -g @vue/cli@4.5.15
三、创建项目
1、选择一个除C盘外的盘符,创建Vue文件夹,进入该文件夹cmd。
2、vue create first_vue(项目名称)
3、选择手动配置,Manually select ,enter进入下
对于每一项功能的解释:
- Babel 主要是对es6语法转换成兼容的js (选上)
- TypeScript 支持使用TypeScript语法来编写代码
- Progressive Web App (PWA) Support [把网页做的更像原生app]
- Router 支持vue路由配置插件(一般都会选择)
- Vuex 支持vue程序状态管理模式 (一般都会选择)
- CSS Pre-processors 支持css预处理器 (一般都会选择)
- Linter / Formatter 支持代码风格检查和格式化 (选上)
- Unit Testing 单元测试
- E2E Testing E2E测试
4、选完之后回车,这里我们选择3.x的。
5、回车之后出现以下页面,我们选择 n 。这里的意思是问你本次项目是否采用history模式,如果选择Y,需要后台配置具体看vueRouter官网解释,这里我们选择 n
6、回车后出现以下页面,选择第一个。这里的意思是问你选择哪一种CSS预处理语言。
7、回车后出现以下页面,选择最后一个ESLint + Prettier。这里的意思是选择一种格式化代码方式。
8、回车后出现以下页面,选择Lint on save 。这里的意思是问你什么时候进行代码规则检测。
9、回车后出现以下页面,选择第一个。这里的意思是将Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个。
10、回车以后出现如下页面,这里是问你是否记录这次配置选择,选择之后会让你为这次配置起一个名字,这样下次可以直接快速配置选择,最后回车后就会初始化项目了。
11、初始化项目成功,如下图。
12、根据提示,我们先cd first_vue ,再npm run serve 启动项目,结果报错了,百度了下版本不兼容问题。出现这个错误是因为 node.js V17版本中最近发布的OpenSSL3.0, 而OpenSSL3.0对允许算法和密钥大小增加了严格的限制,可能会对生态系统造成一些影响.
13、解决上面问题的办法:set NODE_OPTIONS=--openssl-legacy-provider 运行就可以解决版本不兼容的问题。项目启动成功。
本人按照这种设置方法不管用,每次进去都得设置一次很麻烦。果断卸载了高版本的,安装低版本的node.js成功解决。安装版本:V16.15.0
14、出现下面的页面就代表项目启动成功了。