Vue2学习笔记1 - win10下安装vue开发环境

最新推荐文章于 2024-05-31 02:18:17 发布

Myron.Maoyz

最新推荐文章于 2024-05-31 02:18:17 发布

阅读量1.3k

点赞数

分类专栏： Vue 文章标签： vue.js

本文链接：https://blog.csdn.net/justflow/article/details/109273620

版权

Vue 专栏收录该内容

10 篇文章 3 订阅

订阅专栏

操作系统为Win10_x64

1.安装NodeJs

Vue的安装依赖NodeJs，所以需要先安装NodeJs，去NodeJs官网（http://nodejs.cn/download/）下载对应系统的nodejs安装文件：node-v14.13.1-x64.msi，我下载的是14.13.1版本。

NodeJs的安装路径可以自己修改，建议不要放在C盘。安装完成后，修改系统的环境变量中的Path路径，将NodeJs的安装目录加入Path路径中。打开命令行界面，执行指令

> node -v

> npm -v

> npm config ls

> npm config set cache "D:\ProgramFiles\npm-cache"

> npm config set prefix "D:\ProgramFiles\npm"

-v 用来查看安装的版本，npm config ls 可以查询npm的插件安装目录，一般默认在 C:\Users\用户名\ 下，由于后续npm的插件还是比较废C盘空间，可以通过重置路径指令set cache 和set prefix来修改目录，之后可以在C:\Users\用户名\目录下多出一个.npmrc文件，存放这个配置信息。

之后便可以使用命令行npm install 进行安装Vue等安装包，但是一般在国内由于网络问题，会效率比较低，很可能无法完成，我们一般会选择国内的淘宝镜像，安装cnpm指令，可以参考：https://developer.aliyun.com/mirror/NPM?from=tnpm

> npm install -g cnpm --registry=https://registry.npm.taobao.org

为了能在任何一个目录都可以使用cnpm的命令，我们需要将cnpm命令的目录，也就是npm配置的prefix对应目录路径，加入系统环境变量的Path路径。可以通过在命令行输入 cnpm -v 来确认。

注：最近看了不少帖子上都说，cnpm有时候会遇到一些莫名其妙的问题，我在后期安装一些依赖包的时候也有发生，感觉好像是cnpm和npm是在不同的路径下的，看了一下安装cnpm后的目录，cnpm和npm都在npm的安装目录路径下，但是cnpm在npm的node_modules下有个cnpm目录，这个cnpm目录里还有一个node_modules目录，里面也有好多依赖包的文件目录。所以，最终我卸载了cnpm的模块。

> npm uninstall -g cnpm

如果觉得npm安装速度太慢，还是追加 --registry=https://registry.npm.taobao.org，这样安装的依赖包本地都在npm的安装目录下的node_modules，只不过是从淘宝镜像中下载的。

2.安装Vue-Cli，webpack

安装完NodeJs之后，开始安装Vue的脚手架vue-cli以及webpack,可以使用命令行npm install 安装，也可以使用cnpm install安装

> cnpm install -g @vue/cli @vue/cli-init

> vue -V
@vue/cli 4.5.8

> cnpm install -g webpack webpack-cli

> webpack -v

webpack-cli 4.1.0

webpack 5.2.0

安装完之后，可以使用命令 vue -V 以及webpack -v 确认是否安装成功。

注：在弃用cnpm之后,vue-cli的安装，我们也就用npm + 淘宝镜像的方式来安装了

> npm install -g @vue/cli @vue/cli-init --registry=https://registry.npm.taobao.org

> npm install -g webpack webpack-cli --registry=https://registry.npm.taobao.org

3. 安装Visual Studio Code的配置

Vs code的下载地址：https://code.visualstudio.com/Download，安装步骤略过不提，安装完成后，打开Vscode，在扩展商店中，搜索 Chinese (Simplified) Language，确认中文包（Chinese (Simplified) Language Pack for Visual Studio Code）是否安装，安装之后，【Ctrl+Shift+p】，在搜索框中输入“configure display language”，点击确定后，选择zh-cn，重启Vs code工具。

下一步就是安装Vue相关的扩展了，可以参考这两个网址：https://blog.csdn.net/yujing1314/article/details/90340647，https://www.cnblogs.com/cbpm-wuhq/p/12355722.html，具体看个人习惯和喜好，一般来说有几个必不可少的：Vetur，Debugger for Chrome，ESLint，npm，Path Intellisense，Vue 2 Snippets，HTML CSS Support，CSS-in-JS。

4. 使用Vue-cli4创建Vue项目

打开命令行界面，进入计划存放项目的目录，项目目录将在当前目录下创建。

使用命令行：vue create [项目名称]，

vue create 命令有一些可选项，你可以通过运行以下命令进行探索：

> vue create --help

用法：create [options] <app-name>

创建一个由 `vue-cli-service` 提供支持的新项目


选项：

  -p, --preset <presetName>       忽略提示符并使用已保存的或远程的预设选项
  -d, --default                   忽略提示符并使用默认预设选项
  -i, --inlinePreset <json>       忽略提示符并使用内联的 JSON 字符串预设选项
  -m, --packageManager <command>  在安装依赖时使用指定的 npm 客户端
  -r, --registry <url>            在安装依赖时使用指定的 npm registry
  -g, --git [message]             强制 / 跳过 git 初始化，并可选的指定初始化提交信息
  -n, --no-git                    跳过 git 初始化
  -f, --force                     覆写目标目录可能存在的配置
  -c, --clone                     使用 git clone 获取远程预设选项
  -x, --proxy                     使用指定的代理创建项目
  -b, --bare                      创建项目时省略默认组件中的新手指导信息
  -h, --help                      输出使用帮助信息

你也可以通过 vue ui 命令以图形化界面创建和管理项目：

> vue ui

图形化界面在配置项目的时候更直观一点，但是在最后一步执行创建的步骤，需要花更多的时间，所以一般在初始化项目的时候，还是用指令更多一点，也看个人习惯。这里用继续指令执行创建项目。

> vue create -n ft-admin-vue

通过上下方向键选择，选择Menually select features模式，即手动模式，按【回车】进入项目模块选择，vue-cli4提供vue版本，babel,TS,PWA,Vue-Route,Vuex,CSS，Linter，Unit-Test，E2E-Test这几个模块，学习阶段，仅选择Vue version,Babel,Router这三个，Vue的版本最新是3.0但是相关中文文档还不是很多，很多Vue的框架也还没有对Vue3的支持，这里先用2.x学习也够了，另外Linter对初学者来说，太费事，建议先取消，后期可以再增加，之后就是所选几个模块的配置选择操作，一路回车选默认值即可，结果如下图：

之后，就会开始自动创建项目架构目录文件，安装完成后，如下图所示：

按照安装提示指令，之后输入最后两行命令。

打开浏览器，在地址栏输入提示的任意一个地址：http://localhost:8080/，如下图所示，表示项目创建成功了。

5. 使用npm run build发布项目

使用npm run serve用的是nodejs作为服务器后台，但一般来说，目前大多数服务器上，搭建的服务器平台大多数还是以Apache或者Nginx为主，这就需要对Vue项目进行发布，指令为npm run build指令。

> npm run build


\  Building for production...

 DONE  Compiled successfully in 17114ms                                        下午10:29:04                                                                                                                                             
  
  File                                 Size                     Gzipped                                                            
  
  dist\js\chunk-vendors.7295c9df.js    117.71 KiB               41.45 KiB                                                                   
  dist\js\app.565dba18.js              5.94 KiB                 2.22 KiB                                                                  
  dist\js\about.e290d6c1.js            0.44 KiB                 0.31 KiB                                                                   
  dist\css\app.b087a504.css            0.42 KiB                 0.26 KiB                                                                   

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

执行完后，在项目目录下，会新增一个dist目录，dist内就是发布需要的程序文件，把整个dist目录copy到Apache或者Nginx的发布目录内，并设定Apache配置，将建立虚拟服务器，根目录指向dist目录，默认打包文件下的index.html在根目录下。

# apache配置文件增加虚拟服务器配置

Listen 8100
<VirtualHost *:8100>
    DocumentRoot "D:/WebSite/port8100"
    ServerName localhost
    ErrorLog "logs/port8100-error.log"
    CustomLog "logs/port8100-access.log" common
</VirtualHost>

至此，绝对路径的打包配置就算完成了。（尝试相对路径，调整各种配置，踩了很多坑，各种失败，暂且放下不提，等以后了解更多后，再来尝试相对路径）。

6.package.json，package-lock.json的说明

packe.json，package-lock.json是针对于nodejs项目中的必需的配置文件，npm指令中install，uninstall,-S,-D,-g这些参数都将会体现在这两个文件中。先来看package.json文件

{
  "name": "vue-admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.6.5",
    "standard": "^16.0.3",
    "vue": "^2.6.11",
    "vue-router": "^3.2.0",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "@vue/eslint-config-standard": "^5.1.2",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-import": "^2.20.2",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.0",
    "eslint-plugin-vue": "^6.2.2",
    "vue-template-compiler": "^2.6.11"
  }
}

先简单罗列一下官方的key说明

name 设置了应用程序/软件包的名称。
version 表明了当前的版本。
description 是应用程序/软件包的简短描述。
main 设置了应用程序的入口点。
private 如果设置为 true，则可以防止应用程序/软件包被意外地发布到 npm。
scripts 定义了一组可以运行的 node 脚本。
dependencies 设置了作为依赖安装的 npm 软件包的列表。
devDependencies 设置了作为开发依赖安装的 npm 软件包的列表。
engines 设置了此软件包/应用程序在哪个版本的 Node.js 上运行。
browserslist 用于告知要支持哪些浏览器（及其版本）。

name,version，这类都不多说了，项目各自定义就行，剩余的根据nodejs中文官网的教程说明

private：如果设置为 true，表示这个项目是私人项目，不对外发布，可以防止应用程序/软件包被意外发布到 npm 上。

scripts：用来定义可以运行的 node 脚本。

dependencies：设置作为依赖安装的 npm 软件包的列表。当使用 npm 安装软件包时：npm install <PACKAGENAME> 时，该<PACKAGENAME>会被自动地插入此列表中，但是不会保存到package.json中，只有加了参数--save 或 -S，才会被添加进package.json中，即：npm install -S <PACKAGENAME> 或 npm install --dev <PACKAGENAME> 。dependencies中的软件包，是作为项目运行时候必须存在的，在项目发布的时候，这部分将会被打包进去。

devDependencies：设置作为开发依赖安装的npm软件包的列表。它们不同于dependencies，因为它们只需安装在开发机器上，而无需在生产环境中运行代码。可以通过 npm install --dev <PACKAGENAME>的方式来安装，该<PACKAGENAME>会被自动插入此列表，但是也同样不会保存到package.json文件中，如果想要在package.json中看到，--dev 要换成 --dev--save或者 -D 才行，即：npm install -D <PACKAGENAME> 或 npm install --dev--save <PACKAGENAME> 。

除了上面package中已经出现的几个必须的key之外，还有一些常用的key，具体的作用说明，大家可以去官网查看：http://nodejs.cn/learn/the-package-json-guide

除了package.json文件之外，还有一个package-lock.json，看文件名，基本就可以可以猜测出这个文件的大致作用了，官方说法：该文件旨在跟踪被安装的每个软件包的确切版本，以便产品可以以相同的方式被 100％复制（即使软件包的维护者更新了软件包）。简单来说，就是用来锁定采用的第三方软件包到底是哪一个版本的，避免因为第三方软件包升级而导致的错误。那是不是就表示放弃了所有的第三方软件升级呢？也不是的。在 package.json 中，可以使用 semver 表示法设置要升级到的版本（补丁版本或次版本），例如：

如果写入的是 〜0.13.0，则只更新补丁版本：即 0.13.1 可以，但 0.14.0 不可以。
如果写入的是 ^0.13.0，则要更新补丁版本和次版本：即 0.13.1、0.14.0可以，但1.0.0不可以依此类推。
如果写入的是 0.13.0，则始终使用确切的版本。

有个package.json，package-lock.json文件的存在，就可以避免将庞大的node_modules目录提交到git或者svn这类代码管理平台中。

注意：当运行 npm update 时，package-lock.json 文件中的依赖的版本会被更新。

7. VS Code的相关插件

作者使用Vs Code作为开发Vue的IDE工具，Vs Code的安装这里就不说了，主要就是说一下，安装哪些扩展。

必须： vetur，Debugger for Chrome，ESLint，HTML Snippets，HTML CSS Support，JavaScript (ES6) code snippets，Auto Close Tag，VueHelper，npm，

推荐：Auto Rename Tag，Beautify，Git History，Path Intellisense，vscode-icons，Document This，Bookmarks，Color Picker，Npm Intellisense

通过VsCode界面，我们可以直接启动npm服务，非常方便，另外看到Vue官网有说Vs code和chrome浏览器搭配可以进行调试开发，目前还没有掌握，下一阶段会研究一下。

注：在写这篇文章前，作者通过慕课网，学习了上面的vue-cli全集的课程（这是免费课程，注册了帐号就可以看到的，这里感谢大谷的贡献），https://www.imooc.com/learn/1173，之后自己操作记录下学习笔记。

补充一个github上推荐的vscode的前端开发插件

名称	简述
Auto Close Tag	自动闭合HTML标签
Auto Import	import提示
Auto Rename Tag	修改HTML标签时，自动修改匹配的标签
Babel JavaScript	babel插件，语法高亮
Babelrc	.babelrc文件高亮提示
Beautify css/sass/scss/less	css/sass/less格式化
Better Align	对齐赋值符号和注释
Better Comments	编写更加人性化的注释
Bookmarks	添加行书签
Bracket Pair Colorizer	用不同颜色高亮显示匹配的括号
Can I Use	HTML5、CSS3、SVG的浏览器兼容性检查
Code Outline	展示代码结构树
Code Runner	运行选中代码段（支持多数语言）
Code Spell checker	单词拼写检查
CodeBing	快速打开Bing并搜索，可配置搜索引擎
Color Highlight	颜色值在代码中高亮显示
Color Info	小窗口显示颜色值，rgb,hsl,cmyk,hex等等
Color Picker	拾色器
CSS-in-JS	CSS-in-JS高亮提示和转换
Dash	集成Dash
Debugger for Chrome	调试Chrome
Document This	注释文档生成
DotENV	.env文件高亮
EditorConfig for VS Code	EditorConfig插件
Emoji	在代码中输入emoji
endy	将输入光标跳转到当前行最后面
ESLint	ESLint插件，高亮提示
File Peek	根据路径字符串，快速定位到文件
filesize	状态栏显示当前文件大小
Find-Jump	快速跳转到指定单词位置
Font-awesome codes for html	FontAwesome提示代码段
ftp-sync	同步文件到ftp
Git Blame	在状态栏显示当前行的Git信息
Git History(git log)	查看git log
gitignore	.gitignore文件语法
GitLens	显示文件最近的commit和作者，显示当前行commit信息
GraphQL for VSCode	graphql高亮和提示
Guides	高亮缩进基准线
Gulp Snippets	Gulp代码段
HTML CSS Class Completion	CSS class提示
HTML CSS Support	css提示（支持vue）
HTMLHint	HTML格式提示
htmltagwrap	快捷包裹html标签
htmltagwrap	包裹HTML
Import Beautify	import分组、排序、格式化
Import Cost	行内显示导入（import/require）的包的大小
Indenticator	缩进高亮
IntelliSense for css class names	css class输入提示
JavaScript (ES6) code snippets	ES6语法代码段
JavaScript Standard Style	Standard风格
JS Refactor	代码重构工具，提取函数、变量重命名等等
JSON to TS	JSON结构转化为typescript的interface
JSON Tools	格式化和压缩JSON
jumpy	快速跳转到指定单词位置
language-stylus	Stylus语法高亮和提示
Less IntelliSense	less变量与混合提示
Lodash	Lodash代码段
Log Wrapper	生产打印选中变量的代码
markdownlint	Markdown格式提示
MochaSnippets	Mocha代码段
Node modules resolve	快速导航到Node模块
npm	运行npm命令
npm Intellisense	导入模块时，提示已安装模块名称
Output Colorizer	彩色输出信息
Partial Diff	对比两段代码或文件
Path Autocomplete	路径完成提示
Path Intellisense	另一个路径完成提示
Polacode	将代码生成图片
PostCss Sorting	css排序
Prettier - Code formatter	prettier官方插件
Prettify JSON	格式化JSON
Project Manager	快速切换项目
Quokka.js	不需要手动运行，行内显示变量结果
React Native Storybooks	storybook预览插件，支持react
React Playground	为编辑器提供一个react组件运行环境，方便调试
React Standard Style code snippets	react standar风格代码块
REST Client	发送REST风格的HTTP请求
Sass	sass插件
Settings Sync	VSCode设置同步到Gist
Sort lines	排序选中行
Sort Typescript Imports	typescript的import排序
String Manipulation	字符串转换处理（驼峰、大写开头、下划线等等）
stylelint	css/sass/less代码风格
SVG Viewer	SVG查看器
Syncing	vscode设置同步到gist
Test Spec Generator	测试用例生成（支持chai、should、jasmine）
TODO Parser	Todo管理
TS/JS postfix completion	ts/js后缀提示
TSLint	TypeScript语法检查
Types auto installer	自动安装@types声明依赖
TypeScript Hero	TypeScript辅助插件，管理import、outline等等
TypeScript Import	TS自动import
TypeScript Import Sorter	import整理排序
Typescript React code snippets	React Typescript代码段
TypeSearch	TS声明文件搜索
Version Lens	package.json文件显示模块当前版本和最新版本
vetur	目前比较好的Vue语法高亮
View Node Package	快速打开选中模块的主页和代码仓库
VS Live Share	实时多人协助
VSCode Great Icons	文件图标拓展
vscode-database	操作数据库，支持mysql和postgres
vscode-icons	文件图标，方便定位文件
vscode-random	随机字符串生成器
vscode-spotify	集成spotify，播放音乐
vscode-styled-components	styled-components高亮支持
vscode-styled-jsx	styled-jsx高亮支持
Vue TypeScript Snippets	Vue Typescript代码段
VueHelper	Vue2代码段（包括Vue2 api、vue-router2、vuex2）
Wallaby.js	实时测试插件

个人首选项配置（仅供参考）

{
  "breadcrumbs.enabled": true,
  "editor.tabSize": 2,
  "editor.renderWhitespace": "boundary",
  "editor.cursorBlinking": "smooth",
  "editor.minimap.renderCharacters": false,
  "editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New', monospace, 'Droid Sans Fallback'",
  "editor.fontLigatures": true,
  "explorer.confirmDragAndDrop": false,
  "extensions.autoUpdate": false,
  "files.insertFinalNewline": true,
  "git.autofetch": true,
  "git.path": "F:\\Program Files\\Git\\cmd\\git.exe",
  "search.exclude": {
    "**/node_modules": true,
    "**/dist": true
  },
  "typescript.locale": "en",
  "window.titleBarStyle": "custom",
  "window.title": "${dirty}${activeEditorMedium}${separator}${rootName}",
  "window.zoomLevel": 1,
  "workbench.activityBar.visible": true,
  "workbench.colorTheme": "Plastic - deprioritised punctuation",
  "workbench.iconTheme": "vscode-great-icons",
  "workbench.startupEditor": "newUntitledFile",
  "eslint.autoFixOnSave": true,
  "eslint.validate": ["javascript", "javascriptreact", "vue"],
  "vsicons.projectDetection.autoReload": true,
  "vsicons.dontShowNewVersionMessage": true,
  "tslint.autoFixOnSave": true,
  "debugwrapper.wrappers": {
    "default": "console.log('$eSEL', $SEL)"
  },
  "prettier.tslintIntegration": true,
  "cSpell.userWords": [
    "Unmount"
  ],
  "jest.autoEnable": false
}

https://cloud.tencent.com/developer/article/1004923

https://blog.csdn.net/mezheng/article/details/79650816

http://nodejs.cn/learn/the-package-json-guide

https://www.cnblogs.com/yuesu/p/10980848.html

https://github.com/varHarrie/varharrie.github.io/issues/10

Myron.Maoyz

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue2学习笔记1 - win10下安装vue开发环境

操作系统为Win10_x641.安装NodeJsVue的安装依赖NodeJs，所以需要先安装NodeJs，去NodeJs官网（http://nodejs.cn/download/）下载对应系统的nodejs安装文件：node-v14.13.1-x64.msi，我下载的是14.13.1版本。NodeJs的安装路径可以自己修改，建议不要放在C盘。安装完成后，修改系统的环境变量中的Path路径，将NodeJs的安装目录加入Path路径中。打开命令行界面，执行指令> node -v.
复制链接

扫一扫