vue环境部署步骤

2 年前

youneedPython

1.在电脑新建文件夹，将vsc安装在此文件夹下。注意：安装vsc,安装路径不要有空格，有空格安装可能会报错。

2.安装完成vsc之后，需要安装vsc插件，依次安装以下插件：（查看已经安装插件，输入@installed）

1.open in browser（快捷键打开HTML Alt + B,以下每一个插件的作用自行百度，以下省略.....）,

2.Vue

3.Auto Rename Tag ,自动完成另一侧标签的同步修改

4.Path Intellisense,自动路径补全

5.HTML CSS Support , 让 html 标签上写class 智能提示当前项目所支持的样式，安装后有快捷提示

6.Element UI Snippets,

7.Live server,

8.node-snippets

9.JavaScript (ES6) code snippets

10.Debugger for Chrome

11.ESLint

12.HTMLHint

13.npm Intellisense

14.Vetur 语法高亮、智能感知、Emmet

3.vsc勾选自动保存(不需要每次手动保存CTRL+S),还有设置字体大小

4.安装Node.js主要使用它里面的npm这个工具，

安装步骤：在电脑创建文件夹存放安装的node.js ，

使用共享的安装包之后查看是否安装成功，C:\Users\Administrator>npm -v 出现6.4.1表示成功，

如果命令行窗口提示 nmp 不是内部或外部命令，则配置环境变量：我的电脑 -> 右键属性 -> 高级系统设置 -> 高级 -> 环境变量 -> 系统变量 -> path ->使用分号添加npm.cmd路径

补充知识点：npm一些常规操作命令，可以上网查看资料，我这个项目直接复制文件夹进服务器，不用再下载了，而且我这个项目使用本地安装模块，不使用全局环境

5.安装node.js时候默认全局环境地址在C盘，需要更改全局环境变量地址： npm config set prefix "D:\npm" ，（新的路径自己选择）

更改之后，添加淘宝镜像加速器：npm config set registry https:// registry.npm.taobao.org

全局安装脚手架：npm install -g @vue/cli@4.3.1（主要作用，是文件夹都已经规划好架构）（我在虚拟机安装不了脚手架，网速太慢慢。解决办法：直接复制笔记本的文件夹到虚拟机）

检查是否安装成功 vue -V，（如果出现'vue' 不是内部或外部命令，需要配置环境变量，1.查看全局安装目录 nmp root -g 2.在全局环境路径下找到vue.cmd所在的路径并且复制，加入环境变量path）

6.新建文件夹之后cmd进入，运行 vue create 命令来创建一个新项目（项目名称不能有大写字母）

vue create 项目名字

选择默认配置

创建完成，cd 进入项目路径下再进行启动项目 npm run serve

停止项目 Ctrl + c ，输入 y

发布于 2021-05-21 16:45