vue 环境搭建的简单总结
构成: Node.js 环境 cnpm npm 的淘宝镜像 Veu cli 手脚架构建工具
安装 node.js 环境
安装 node.js 方法步骤 https://jingyan.baidu.com/article/b0b63dbfca599a4a483070a5.html;
安装 cnpm
有些 npm 有些资源被屏蔽或者是国外资源的原因, 经常会导致用 npm 安装依赖包的时候失败, 所以需要 npm 的国内镜像 ---cnpm
在命令行中输入 npminstall-gcnpm--registry=http://registry.npm.taobao.org 然后等待
安装 vue-cli 脚手架构建工具
在命令行中运行命令 npm install -g vue-cli
如果在此步骤时出现了 vue 不是内部或外部命令的提示时, 有可能时 vue 没有安装, 则需要在命令行运行 npm vue
然后在命令行中运行 cnpm install -g vue-cli
用 vue-cli 构建项目
创建项目, 首先要选定目录, 然后再命令行中把目录转到选定的目录
例如: 在此步骤, 我在 D 盘新建了一个文件夹 myvue
在我指定的 myvue 目录下, 在命令行中运行命令 vue init webpack myvues 该命令个命令的意思是初始化一个项目, 其中 webpack 是构建工具, 也就是整个项目是基于 webpack 的 myvues 是整个项目文件夹的名称, 这个文件夹会自动生成在我指定的 myvue 目录下
运行初始化命令的时会让用户输入几个基本的选项, 如项目名称, 描述, 作者等信息, 如果不想填直接回车默认就好
安装项目所需的依赖
安装依赖包, 首先 cd 到项目文件夹 (myvues 文件夹), 然后运行命令 npm install 或者是 cnpm install(因为我的无法 npm 下载, 只能用 cnpm), 等待安装
安装完之后, myvues 目录下会多出一个 node_modules 文件夹, 该文件夹就是我们项目需要的依赖包资源
安装完依赖包之后, 就可以运行整个项目了
运行项目
在项目目录中, 运行命令 npm run dev ,
然后在浏览器手动运行 localhost:8080, 运行成功则会出现如下界面
然后手动关闭 (ctrl+c)
安装 json 和 resource 和 router
npm install vue-router --save npm install vue-resource sav 这两句话等同于:
npm install vue-router vue-resource --save
npm install json-server --save
3. 安装 vue develop tools
安装步骤方法链接:
https://www.cnblogs.com/tanyongli/p/7554045.html
首先在 github 下载 devtools 源码, 地址:
https://github.com/vuejs/vue-devtools
下载好 devtools 源码, 进入 vue-devtools-master 工程 执行 cnpm install, 下载依赖在此步骤中我将其直接放在 D 盘下
然后执行 npm run build, 编译源程序
该步骤完成后, 修改 shellschrome 目录下的 mainifest.json 中的 persistant 为 true:
打开谷歌浏览器的设置 ---> 扩展程序, 并勾选开发者模式
然后将刚刚编译后的工程中的 shells 目录下, chrome 的整个文件夹直接拖拽到当前浏览器中, 并选择启用, 即可将插件安装到浏览器
打开一个已有的 vue 项目, 运行项目, 然后在浏览器中 ---> 设置 ---> 更多工具 ---> 开发者工具, 进入调试模式: 发现 vue.js is not detected , 可以调整一下 webpack.config.js 的代码
最后重启 vue 项目就可以了
来源: http://www.bubuko.com/infodetail-2520671.html