Vue入门学习笔记(一) Mac环境的安装及项目初始化
一.安装初始化VUE项目
- 安装node.js
brew install node //安装nodejs
node -v //安装成功能看到版本号
- 获取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 [email protected]
? License MIT
? Use sass? No
~全部 默认回车
8.进入项目路径
cd vue1/
9.安装项目依赖
cnpm install
- 安装 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 //图形化创建项目