MacOS下安装Vue.js
一、开发环境
- brew
Mac 下的一个包管理工具，可以在mac上安装、卸载、更新各种软件包。
MacBook-Pro / % brew -v
Homebrew 3.3.5-28-g3ab140e
Homebrew/homebrew-core (git revision 63e2388f12d; last commit 2021-11-24)
Homebrew/homebrew-cask (git revision b8049f243b; last commit 2021-11-24)
brew install <package> # 安装指定包
brew upgrade <package> # 更新指定包
brew remove <package> # 卸载指定包
- node .js
JavaScript运行环境(runtime)
MacBook-Pro / % node -v
v17.0.1
获取nodejs模块安装目录访问权限
sudo chmod -R 777 /usr/local/lib/node_modules/
- npm
node.js下的包管理器，NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用
MacBook-Pro / % npm -v
8.1.0
npm install <package> # 本地安装
npm install <package> -g # 全局安装
npm list –g #查看所有全局安装的模块
npm uninstall <package> # 卸载模块
npm update <package> # 更新模块
npm的路径
dulei@duleideMBP nov-search-platform % npm root -g
/Users/dulei/.nvm/versions/node/v16.4.0/lib/node_modules
查看npm全局包可执行文件路径
dulei@duleideMBP nov-search-platform % npm -g bin
/Users/dulei/.nvm/versions/node/v16.4.0/bin
- 安装淘宝镜像
npm用国外的服务器，速度比较慢，淘宝提供了一个cnpm命令，可以从淘宝镜像下载，淘宝镜像与官方同步频率目前为 10分钟 一次以保证尽量与官方服务同步。设置环境变量可以使得住任意目录下都可以使用cnpm、vue等命令，而不需要输入全路径。
MacBook-Pro / % cnpm -v
[email protected] (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
[email protected] (/usr/local/bin/node)
[email protected] (/usr/local/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/usr/local
darwin arm64 20.5.0
registry=https://registry.npmmirror.com
查看镜像
dulei@duleideMBP nov-search-platform % npm config ls
; "user" config from /Users/dulei/.npmrc
registry = "https://registry.npm.taobao.org/"
; node bin location = /Users/dulei/.nvm/versions/node/v16.4.0/bin/node
; cwd = /Users/dulei/Downloads/实验室/softwareinstitutionserver/NovSearchPlatform/nov-search-platform
; HOME = /Users/dulei
; Run `npm config ls -l` to show all defaults.
dulei@duleideMBP nov-search-platform % npm config get registry
https://registry.npm.taobao.org/
- webpack
Vue 的组件都是通过 .vue 或者像微信小程序的.wxml 和.wcss 等自定义的组件都无法被用户通过各种浏览器解析，需要被翻译打包成 js 文件
sudo npm install webpack -g
- vue脚手架vue-cli
用来生成模版的 Vue 工程，相当于按照设计好的图纸来盖房子
sudo npm install vue-cli -g
检测一下vue-cli是否安装成功
MacBook-Pro ~ % vue --version
2.9.6
MacBook-Pro ~ % vue -V（V要大写）
2.9.6
二、创建vue项目
- 找一个文件夹放工程用的目录
cd /Users/xxxxx/Downloads/实验室
- 根据模板创建项目
项目名字不能包含大写字母
vue init webpack myfirstvueproject
MacBook-Pro 实验室 % vue init webpack myfirstvueproject
? Project name myfirstvueproject
? Project description based knowledgetree
? Author dulei
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "myfirstvueproject".
# Installing project dependencies ...
- 安装项目以依赖
cd myfirstvueproject
npm install
安装 vue 路由模块 vue-router 和网络请求模块 vue-resource
cnpm install vue-router vue-resource --save
三、启动项目
- npm run dev
npm run dev
vue自带了一个类似server.js的配置，所以运行npm run dev命令后，会启动一个服务器。
MacBook-Pro myfirstvueproject % npm run dev
> [email protected] dev
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
(node:53613) [DEP0111] DeprecationWarning: Access to process.binding('http_parser') is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)
10 11 11 12 12 13 13% building modules 26/33 modules 7 active ...project/src/components/HelloWorld.vue{ parser: "babylon" } is deprecated; we now treat it as { parser: "babel" }.
13 14 95% emitting
DONE Compiled successfully in 5039ms 上午11:18:26
I Your application is running here: http://localhost:8080
- 浏览器访问http://localhost:8080
显示页面，安装成功！
四、运行vue项目
在项目目录下
- 首次运行安装依赖
dulei@duleideMBP nov-search-platform % npm install
up to date in 2s
20 packages are looking for funding
run `npm fund` for details
- 启动开发服务器
未启动服务器访问http://localhost:8080时候
- dist
存放产出物的文件夹，执行下面命令后出现
npm run build
启动服务器
《注意：一定要记得在相应的前端目录下执行！！！》
dulei@duleideMBP nov-search-platform % npm run serve
> [email protected] serve
> vue-cli-service serve
INFO Starting development server...
。。。。。。。。
DONE Compiled successfully in 7131ms 下午8:01:24
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.10.194:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
- 访问http://localhost:8080/ ，如下图所示
项目运行成功
五、目录结构
vscode/settings.json：vscode 编辑器的配置
docs：存放项目开发文件的文件夹
node_modules：存放依赖的文件夹，git 忽略，执行 npm run install 后出现
dist：存放产出物的文件夹，git 忽略，执行 npm run build 后出现
public：前端模板静态文件文件夹，开发无需关心
src:存放源码的文件夹，下文详细介绍
.browserslistre：浏览器兼容性列表
.editorconfig：通用编辑器基础配置
.eslintignore：Lint 工具 ESLint 忽略文件列表
.eslintrc.js：Lint 工具 ESLint 配置文件
.gitignore：git 忽略文件列表
.prettierrc：格式化工具 Prettier 配置文件
babel.config.js：编译工具 Babel 配置文件
package.json：项目描述文件
package.lock.json：项目制定依赖版本号的文件
README.md：项目自述文档
- src详细介绍
主要开发区域
assets：静态资源
components:组件，多次复用的页面
dao： API 统一接入层
router：vue-router 路由
store：vuex 统一状态管理
view：页面
App.vue：入口页面
main.js：入口文件
registerServiceWorker.js：PWA 注册的 SW 线程文件（暂不涉及）
六、规范
- 组件文件名
首字母大写的驼峰，如：App.vue About.vue - 组件标签名：
首字母大写的驼峰，如： - 业务变量名：
首字母小写的驼峰，如：userName - 分支名规范：
采取 type/name 的形式
+ type 合法值：hot/fix/feat/co/dev/release/per
+ name：中划线连接的小写单词
+ eg.：fix/right-click co/v1.4 per/angel feat/upload-file - git commit 约束：
项目中尽可能使用 git cz 代替 git commit，如仍需 commit 参考 Angular 团队规范 - CSS class 和 id 规范：
采取 [BME 规范]，官方参考文档：BME规范