安装Node.js和创建Vue-cli工程

chao超的搬运文章

发布于 2023-10-15 19:36:20

2150

发布于 2023-10-15 19:36:20

注意事项：

最好下载Node16版本，除非你后续使用的Vue-cli版本比较高，像我使用的Vue-cli3和4.1.1版本去创建工程，然后run运行会报错Error: error:0308010C:digital envelope routines::unsupported

1、当然也可以去下载最新版本，网上已经给了解决方案。

一路Next，中间可以选择一下安装的路径(默认C盘)，最后完成。。。

node -v    //检查node.js版本
npm -v    //检查npm版本

C盘空间不足的，可以执行下面两条命令：

npm config set cache "D:\Program Files\npm-cache"	//改变缓存文件路径
npm config set prefix "D:\Program Files\npm_global" //改变全局包安装的路径

2、全局安装Vuecli(相当于在本机的npm仓库中有了vuecli )

//自己判断安装什么版本

//安装最新@vue/cli版本
npm install -g @vue/cli

//安装指定的@vue/cli版本        这是我用的
npm install -g @vue/cli@4.1.1


//卸载@vue/cli
npm uninstall -g @vue/cli

3、创建vue-cli工程（按照提示顺序依次执行）

vue create hello        //注意工程名必须全部是小写 hello

选择预设模板，这里选择“Manually select features”		//上下键选择

选择依赖：通过 ↑↓ 箭头选择依赖，按 “空格” 选中，按 “a” 全选，按 “i” 反选。
  a. Babel：转码器，可以将ES6代码转为ES5代码，可兼容不支持ES6的浏览器。
  b. TypeScript：是JavaScript的超集（.ts文件），包含并扩展了 JavaScript 的语法。需要被编译输出为 JavaScript在浏览器运行。
  c. Progressive Web App (PWA) Support：渐进式Web应用程序
  d. Router ：vue-router（vue路由）
  e. Vuex ：vuex（vue的状态管理模式）
  f. CSS Pre-processors ：CSS 预处理器（如：less、sass）
  g. Linter / Formatter：代码风格检查和格式化（如：ESlint）
  h. Unit Testing ：单元测试（unit tests）
  i. E2E Testing ：e2e（end to end） 测试
第一次创建工程时，可以只选择Babel和Router即可

选择是否使用history 形式的路由，也就是询问路径是否带 # 号，这里选择 n

询问将依赖文件放在独立文件中，还是package.json中：为了保持工程配置文件的整洁性，这里选择“In package.json”

询问是否将当前选择保存以备下次使用。这里选择“n”

接下来等待安装：最后出现：
cd hello
npm run serve

根据提示执行cd hello，npm run server后会启动成功提示到http://localhost:8080/查看
就会看到vue的欢迎页面