铁马冰河2000

导航

VsCode-操作手册-搭建Vue项目及配置

VsCode搭建Vue项目及配置

一、安装VS Code

官网下载 https://code.visualstudio.com/ 下载VS Code，按照步骤安装。

二、Vue开发环境搭建及配置

  1. 安装node.js
  2. 设置nodejs的全局安装路径和缓存路径
  3. 基于node.js安装cnpm（淘宝镜像）
  4. 安装vue命令行工具，即vue-cli 脚手架

 具体安装手册，可参考https://www.cnblogs.com/taoxw/p/16462376.html

三、创建vue项目

1.命令行方式创建

创建目录D:\Java\vscode-workspace，作为要存放vue项目的目录。然后使用命令行cd进入到该存放目录输入：

vue init webpack vuetest  #在线创建vue项目
Vue init webpack vuetest --offline #离线创建vue项目

2.创建过程中可能遇到的问题汇总

（1）报错：无法加载文件D:\Java\**\node_global\vue.ps1

现象：cmd终端执行正常，vscode的终端执行失败；

 

 解决方法：

  1. 以管理员身份运行VSCode
  2. 执行命令：get-ExecutionPolicy（取得shell的当前执行策略）显示Restricted（表示状态是禁止的）
  3. 执行命令：set-ExecutionPolicy RemoteSigned
  4. 执行命令：get-ExecutionPolicy，显示RemoteSigned

 

 备注：Set-ExecutionPolicy修改PowerShell中执行策略的用户首选项(preference). 执行策略是Windows PowerShell安全策略中的一部分. 它将决定你是否可以载入配置文件(包括你的Windows PowerShell profile文件)和运行脚本, 它将会在运行前确定哪些文件必须具有数字签名(digitally signed)

·Restricted: 不载入配置文件, 不执行脚本. "Restricted"是默认值.

·AllSigned: 所有的配置文件和脚本必须通过信任的出版商签名(trusted publisher), 这里所指的脚本页包括你在本地计算机上创建的脚本.

· RemoteSigned: 所有从互联网上下载的脚本必须通过信任的出版商签名(trusted publisher).

·Unrestricted: 载入所有的配置文件和脚本. 如果你运行了一个从互联网上下载且没有数字签名的脚本, 在执行前你都会被提示是否执行.

（2）报错：Failed to download repo vuejs-templates/webpack: connect ETIMEDOUT 140.82.112.4:443

原因：安装vue脚手架时，使用工具命令vue init webpack vue1创建vue项目时，下载某个package需要FQ，导致出现连接超时。

解决办法：离线创建。我们需要从github仓库中下载vue-templates/webpack，然后解压到本地。下载地址：https://github.com/vuejs-templates/webpack ，然后解压到C:\Users\Administrator\.vue-templates，这我电脑的用户名，要改成自己的，还有.vue-templates如果没有就新建一个文件夹，如果解压后名字是 webpack-develop 要手动改成 webpack ，不然找不到，然后执行命令时加上 --offline 就行了。

（3）报错：VSCode终端中文乱码

原因：在vscode终端 输入chcp 可以查看当前编码，一般powershell为UTF-8，cmd为gbk

解决办法：改变vscode终端编码，输入 chcp 65001 ，将编码改为UTF-8（因为代码为UTF-8编码）

3.vue创建步骤以及配置

（1）运行vue init webpack vuetest --offline（vuetest项目名）

vuetest 就是你要创建的项目名称，可自定义。命令执行之后，会在当前目录生成一个以该名称命名的项目文件夹。

 

 

 选项说明：

Project name (vuetest)    项目名称，可直接回车，使用括号中默认名字（注意这里的名字不能有大写字母，如果有会报错）

Project description (A Vue.js project)   项目描述，也可直接点击回车，使用默认描述

Author ()    作者，输入你的名字，确定则回车

Vue build (Use arrow keys)  构建模式，默认选择第一种> Runtime + Compiler: recommended for most users  运行时+编译器：建议大多数用户使用Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere仅限运行时：大约6KB min+gzip，但模板（或任何特定于Vue的HTML）只允许在.Vue文件中使用-其他地方需要呈现函数

Install vue-router? (Y/n)   是否安装引入vue-router  这是官方的路由，大多数情况下都使用  建议y

Use ESLint to lint your code? (Y/n)  是否使用ESlint语法，ESLint是个代码风格管理工具，是用来统一代码风格的，一般项目中都会使用，建议y

接下来也是选择题Pick an ESLint preset (Use arrow keys) 选择一个ESLint预设，编写vue项目时的代码风格，直接选第一个回车

Set up unit tests (Y/n)  是否安装单元测试  建议n

Setup e2e tests with Nightwatch? (Y/n)  是否和Nightwatch建立端到端的测试  建议n

Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)  是否在项目创建之后运行“npm install”建议选择第三个Yes, use NPM 是的 用npm 建议默认Yes, use Yarn 是的 用yarn 跟npm没什么大的区别> No, I will handle that myself 不 我要自行安装 (选择此项之后 后续仍通过npm install 再次安装)

.......回车之后  等待安装

回答完选项后如上图开始构建vue项目。

 （2）构建完成后，可以看到存放目录下多出了一个项目文件夹vuetest：

 

 

 （3）cd进入vuetest项目文件夹下，执行 npm run dev ，启动项目。

 

 

 （4）在浏览器地址栏输入 http://localhost:8080，访问这个vue项目，启动成功后浏览器会默认打开一个“欢迎页面”：

 

 

 至此，windows下vue开发环境搭建及配置，并创建一个vue项目完成。

4.重新初始化依赖

（1）按照上图的提示，cd 到刚才项目目录
（2）执行npm cache clean --force 清除缓存
（3）执行npm install 重新初始化依赖。

  npm install ：安装所有的模块，如果是安装具体的哪个模块，在install 后面输入模块的名字即可。而只输入install就会按照项目的根目录下的package.json文件中依赖的模块安装（这个文件里面是不允许有任何注释的），每个使用npm管理的项目都有这个文件，是npm操作的入口文件。因为是初始项目，还没有任何模块，所以我用npm install 安装所有的模块。安装完成后，目录中会多出来一个node_modules文件夹，这里放的就是所有依赖的模块。

依赖安装好后，vuetest文件夹里的目录是这样的：

 

 

5. Vue项目结构最详尽讲解

  

 

 

posted on 2022-10-16 22:22  铁马冰河2000  阅读(4151)  评论(0)  编辑  收藏  举报