1. 首先我们可以使用webstrom 打开一个文件夹,然后我们打开webstrom命令行(terminal),新建一个package.json:只需输入,npm init:
然后就会生成package.json文件
![](https://box.kancloud.cn/e53962c94fdd8c0aae65f1f86e3f8772_319x200.png)
2. 我们需要安装,webpack vue vue-loader,于是我们可以在npm输入以下命令行:
![](https://box.kancloud.cn/2e1b4a7ce30db888b93dc8575b8eba7b_687x250.png)
因为npm比较慢,所以我安装了淘宝镜像,所以命令行不是Npm而是cnpm,具体可以去看淘宝镜像安装教程。
安装完毕后会出现警告:
![](https://box.kancloud.cn/ea913cfddcf6e22135fc993bb566cac0_936x63.png)
需要css-loader 和vue-template-comiler
所以我们根据以上步骤继续安装:
~~~
E:\web-file\vue任务代码\vue>cnpm i css-loader vue-template-compiler
~~~
安装成功后,我们还需要一些配置,如webstorm支持vue语法,支持新建vue文件:
1. ①Webstorm 右上角File-Plugins 搜索vue如果没有就去下载 点击serch in repositories
2. ②点击安装vue.js
3. ![](https://box.kancloud.cn/a181b327995b31e6236b3afcf06108f4_769x259.png)
4. ③安装成功后点击右下角Apply 提示重启webstorm 重启完成后 Setting-Editor-File and Code Templates 点击右上角的加号 添加vue文件 Name为vue File, Extension 为vue,下面的位置可以填写自定义的初始化模板内容
5. ![](https://box.kancloud.cn/01b3d78b21248f3c17eba65f6300e7ee_771x491.png)
6. ④点击OK 返回,在项目中新建会出现vue文件 webstorm配置新建vue文件完成。
配置完成后我们可以新建一个文件夹,名字叫src.在里面建一个vue文件,
![](https://box.kancloud.cn/da8857e312ec0298e6a58d8e95f88a1a_345x184.png)
[import Vue form 'vue'](https://www.jianshu.com/p/c0be35475e54)
[vue中render:(h) =>h(App)的含义](https://segmentfault.com/q/1010000007130348)
- 空白目录
- Javascript
- angularjs
- 自定义指令
- scope
- 自定义指令的封装
- 自定义指令限制只能输入数字
- 轮播图
- 写angular的顺序
- $state
- video
- Es6
- Let
- 箭头函数
- export
- promise
- 函数
- vue
- vue安装,以及项目结构
- vue的使用
- easy-vue
- vue起步
- vue基础
- vue-router
- vue-各文件的依赖关系
- vuex
- vue使用sass语法
- mpvue使用wx.parse
- vue-cli 构建vue项目
- vant的使用
- vue使用插件及常见问题
- 原生Js
- 数组
- ajax
- 执行上下文
- 正则表达式
- jqurey
- jqurey-mobile
- html5
- 工具
- svn使用总结
- webpack
- webpack的构建
- WebStorm
- 切图相关
- 苹果手机注意事项
- other
- 前端的价值
- 面试相关
- css
- 小程序如何引用外部字体
- 流的理解
- 替换元素
- content和伪元素
- padding和background 绘制图形
- css圆角,阴影,渐变
- line-height verticle-align
- 使用background绘制4个直角
- android的字体偏上的问题
- 小程序
- 小程序常见问题
- 小程序常用效果
- mpvue
- nodejs
- 前端工程化学习笔记
- mork.js学习