Vue入门

1 安装node.js

下载地址：https://nodejs.org/en/download/

2 配置环境变量

   1 在用户变量中点击“新建”，变量名输入NODE_PATH,变量值输入nodejs安装地址：D:\softpath\nodejs。 在用户变量的path中，输入 %NODE_PATH%

   2 安装完成后测试下nodejs和npm是否安装成功。 node -v         npm-v

   3  npm配置，先配置npm的全局模块的存放路径以及cache的路径。在NodeJs下建立"node_global"及"node_cache"两个文件夹

   4  在终端运行以下两条命令语句

 npm config set prefix D:\softpath\nodejs\node_global

 npm config set cache D:\softpath\nodejs\node_cache

  5 直接复制vue.cmd所在的路径，然后不用点击新建，找到path点击编辑，在里面新建将路径放进去 D:\softpath\nodejs\node_global

3 切换国内源

 npm config get registry

 npm config set registry https://registry.npm.taobao.org　

4 安装脚手架

npm install -g @vue/cli     --管理员身份安装

  

5  用脚手架创建vue项目

    

1 create project projectname(项目名称)            --管理员身份运行
2 Manually select features
3 Check features，根据自己需要进行选择，一般选择 Babel，TypeScript， Router， Vuex，CSS Pre-processors
4 vue版本选择3.x
5 Use class-style component syntax? Yes     Use Babel alongside TypeScript (required for modern mode, auto-detected polyfills, transpiling JSX)? Yes      Use history mode for router? (Requires proper server setup for index fallback in production) No
6 Sass/SCSS (with dart-sass)   In dedicated config files
7 是否保存配置 Save this as a preset for future projects? Yes   
8 如果保存下次可以直接使用

　　

6  启动项目

    终端运行：npm run serve

    因为nodejs版本问题，可能会导致报错：digital envelope routines::unsupported，

    node版本高于16，项目的版本不高于16，node17之后更新了OpenSSL，修改package.json文件

    修改前：

"scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build"
  },

 修改后

"scripts": {
    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service build"
  }

    

 

    启动成功，打开链接