mac系统下搭建Vue开发环境,配置运行Webstorm

系统:MacOS

参考:

搭建环境https://my.oschina.net/u/2464371/blog/3039914

pathhttps://www.codenong.com/11025980/

创建项目https://segmentfault.com/a/1190000007441374

 

 

一、搭建Vue开发环境

Vue.js是一套构建用户界面的渐进式框架。

1、安装Node.js(附带npm)

Node.js就是运行在服务端的 JavaScript。

1.1 官网下载安装Node.js:https://nodejs.org/en/download/

1.2 设置npm(随NodeJS一起安装的包管理工具)的默认安装路径和缓存路径

# 查看用户配置
npm config ls
npm config list
# 查看全部配置
npm config ls -l 
npm config list -l

默认npm包安装目录为prefix = "/usr/local",因为安装时有可能出现权限不够无法安装。

  1. 修改npm安装程序时的默认位置 mkdir .nodejs npm config set prefix "/Users/danni/.nodejs"

  2. 设置npm安装程序时的缓存位置​npm config set cache "/xxx/xx" 缓存的默认位置为cache = "/Users/danni/.npm",在用户下,不存在权限问题,因此也可以不修改。

  3. 然后在把"/Users/danni/.nodejs"路径添加到环境变量PATH中

cd
vi .bash_profile
export NODE_HOME="/Users/danni/.nodejs"
export PATH=":$NODE_HOME/bin:$CNPM_HOME/bin:$M2_HOME/bin:$PATH"

1.3 测试node安装:

打开终端,输入node,出现>交互命令行,然后可以输入console.log("Hello,World");测试安装。 返回​Hello,World和undefined表示成功。

> console.log("Hello,World");
Hello,World
undefined

输入.exit退出node,查看node和npm的版本。

node -v
npm -v

2、安装cnpm

默认的npm包下载地址为registry = "registry https://registry.npmjs.org",在国外,速度较慢,可以用阿里定制的cnpm命令行工具代替默认的npm。

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org --verbose
# 修改配置为cnpm
npm config set registry http://registry.cnpmjs.org
# 复原
#npm config set registry https://registry.npmjs.org

可查看配置是否已修改npm config ls

用户的配置会保存在/Users/danni/.npmrc文件中

cnpm -v测试是否安装成功

3、安装vue-cli

4、安装vue和vuex

cnpm install vue
cnpm install vuex

5、安装vue-cli脚手架

cnpm install vue-cli -g

6、配置环境变量

刚才已配置export NODE_HOME="/Users/danni/.nodejs",确认/Users/danni/.nodejs/bin下有vue等执行文件即可。

DannideMacBook-Pro:bin danni$ ls
cnpm		vue		vue-init	vue-list

7、查看版本,测试Vue是否搭建成功

vue -V

注意:V为大写;此为vue-cli版本,非vue版本。

 

二、安装IDE(如:VSCode or WebStorm)

官网下载

  • https://code.visualstudio.com
  • https://www.jetbrains.com/webstorm/

注:webstorm没有社区版,需购买,目前如个人有开源软件,可向JetBrains申请一年的License,一年后再续期。

 

三、导入工程项目

1、把vue_web项目导入IDE

打开VSCode/webstorm,File - Open打开即可。

2、安装项目

在项目所在目录下执行命令,生成node_modules目录。

cnpm install

3、运行项目

方法一:

  • 在项目所在目录下执行命令。
  • cnpm run dev
  • 控制台输出访问地址,比如:http://localhost:8081

方法二:

  • webstorm中配置Run - Edit Configurations - Add new configuration
  • 选择npm,package-.json选择项目中的package.json,script填写dev
  • 然后点击Run

4、访问测试

  • 根据控制台输入地址访问
  • 如:http://localhost:8081

5、打包项目

npm run build

打包后生成dist目录。

注意:提交代码时,不要上传node-modules、dist文件夹目录下的内容

 

常用包安装

可先安装,防止后续使用时缺少。如:

  • 单元测试mocha:cnpm install -g mocha
  • express框架:cnpm install -g express
  • 等等

 

 

你可能感兴趣的:(前端,system,macos,vue.js)