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
cnpm@7.1.0 (/usr/local/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.14.15 (/usr/local/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@17.0.1 (/usr/local/bin/node)
npminstall@5.2.2 (/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/.npmrcregistry = "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) npmvue-cli · Generated "myfirstvueproject".# Installing project dependencies ...

安装项目以依赖

cd myfirstvueproject

npm install

安装 vue 路由模块 vue-router 和网络请求模块 vue-resource

cnpm install vue-router vue-resource --save

三、启动项目

~~npm install~~

npm run dev

npm run dev # vue自带了一个类似server.js的配置，所以运行npm run dev命令后，会启动一个服务器。

浏览器访问http://localhost:8080
显示页面，安装成功！

四、运行vue项目

在项目目录下 《注意：一定要记得在相应的前端目录下执行！！！》

npm install # 首次运行安装依赖
npm install -g @vue/cli
npm run build
npm run serve

访问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规范

MacOS下安装Vue.js相关推荐

在宝塔环境下安装VUE 及webpack
1.搭建环境--由于本人安装的是宝塔主机,因此如下: 由于我直接使用的是宝塔主机,直接去"软件管理"安装 PM2管理器. 安装好以后点击"设置",找到" ...
Ubuntu下安装Node.js
2019独角兽企业重金招聘Python工程师标准>>> ####Ubuntu下安装Node.js 下载Node.js 解压node-v7.9.0-linux-x64.tar.xz 方 ...
CentOS 下安装 Node.js 8.11.3 LTS Version
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google Chrome V8 JavaScript引擎,简单说是运行在服务端的 JavaScript.下面我们来演示一下Cen ...
Chrome浏览器安装Vue.js devtools插件
Chrome浏览器安装Vue.js devtools插件 1.浏览器访问极简插件 2.右上角搜索框搜索vue DevTools插件 3.在本地文件夹中解压刚刚下载的插件,解压后如下所示 4.打开谷歌浏 ...
【ninja】macOS 下安装ninja
[ninja]macOS 下安装ninja 1.在安装ninja的过程中需要先安装re2c(github地址:https://github.com/skvadrik/re2c): git clone ...
Win7(Win2003)下安装Node.js（版本号：v0.11.0）提供下载
今天试验一个项目,需要Win7下安装Node.js做模拟,试了N多个版本,都不支持win7(Win2003)这种老系统,最后终于试出来一个(版本号:v0.11.0)提供下载. Node.js_v0.1 ...
【潇湘菌子】Centos7下安装node.js环境
Centos7下安装node.js环境过多的介绍就不写了,因为但凡对node.js一点儿都不懂的人,也不至于来搜这个. 情况一:有外网更换版本信息 [root@VM-0-7-centos ~]# ...
如何在Window下安装node\npm\cnpm，并安装vue.js，创建项目
1.安装node.js node.js的官方地址为:https://nodejs.org/en/download/. 根据windows版本后,选择要下载的安装包,下载完毕,按照windows一般应用 ...
Windows下安装node.js(npm) git+vue
Windows下安装git+node.js+npm+vue 放到统一大文件夹下下载node.js http://nodejs.cn/ npm是随同NodeJS一起安装的包管理工具,能解决NodeJS ...

MacOS下安装Vue.js

一、开发环境

二、创建vue项目

三、启动项目

四、运行vue项目

五、目录结构

六、规范

MacOS下安装Vue.js相关推荐

最新文章

热门文章