Vue入门学习笔记(一) Mac环境的安装及项目初始化

一.安装初始化VUE项目

1. 安装node.js

brew install node //安装nodejs
node -v //安装成功能看到版本号

2. 获取nodejs模块安装目录访问权限

sudo chmod -R 777 /usr/local/lib/node_modules/

3.安装镜像

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

4.安装webpack

cnpm install webpack -g

5.安装vue脚手架

cnpm install vue-cli -g

6.在硬盘上找一个文件夹放工程用的，在终端中进入该目录

cd ~/Desktop/vue

---

7.创建一个基于webpack模板的新项目

vue init webpack-simple vue1

? Project name vue1
? Project description A Vue.js project
? Author qiaojinxia 1158829384@qq.com
? License MIT
? Use sass? No

~全部 默认回车

8.进入项目路径

cd vue1/

9.安装项目依赖

cnpm install

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

cnpm install vue-router vue-resource --save

11.启动项目

npm run dev

新建项目过程中如果发现卡死不动了，原因可能是没有安装webpack，
解决方法：执行三个命令检查环境
node -v
vue -v? (没有显示版本，npm i vue-cli -g)
webpack-v(需要重新安装,npm install webpack -g)
三个条件满足时，运行vue init webpack demo（demo项目名）
安装webpack时如果报错 Unexpected end of JSON input while parsing near '…"，用以下步骤解决：
解决办法：
（1）npm install --registry=https://registry.npm.taobao.org --loglevel=silly
（2） npm cache clean --force
（3） npm install

安装OK后，访问http://localhost:8080如下：

二. 在webStorm中启动vue项目：

由于上面 安装的版本是2.x的版本,没法使用vue ui 去创建项目,升级3.X方法

npm install -g @vue/cli

vue ui //图形化创建项目

创建完毕