vue.js环境配置和新建运行项目+环境用Sublime
小白教程:(安装)
https://segmentfault.com/a/1190000012181572
1.安装成功node.js:(必须要的开发环境)
2.安装cnpm:(淘宝镜像-包管理工具-这样你才能用这个命令来在下载安装vue的其他东西)——这个命令安装会比较快
> npm install -g cnpm --registry=https://registry.npm.taobao.org
3.搭建vue的开发环境 ,安装vue的脚手架工具 官方命令行工具
> npm install --global vue-cli (npm命令也可以用,这个是从国外下,所以速度会相对慢些,所以可以使用安装cnpm,用它来安装vue-cli)
> cnpm install --global vue-cli (此命令只需要执行一次)
4.新建项目:
去到项目想放在目录下然后输入cmd+回车
4.1 第一种创建项目方式 (推荐第二种)
> vue init webpack vue-demo01
1.Project name vue-demo01 (他问我是不是要叫这个项目名字,是直接回车就可以)
2.Project description 这是一个学习测试demo01 (项目描述,不想写就回车)
3.Author HUAHUA (作者姓名,不想写就回车)
4.Vue build (Use arrow keys) (直接回车)
5.Install vue-router? Yes (直接回车)
6.Use ESLint to lint your code? No (这个是要不要语法检查,建议不要,要多或少一个空格就报错,所以直接回车)
7. Set up unit tests Yes
8.Pick a test runner jest
9. Setup e2e tests with Nightwatch? Yes
10. Should we run `npm install` for you after the project has been created? (recommended) npm
如果创建项目的时候没有报错,这一步可以省略。如果报错了 cd到项目里面运行 cnpm install / npm install
4.2 另一种创建项目的方式 (推荐)
(他的目录结构比较简单,适合中小型项目,不用那么麻烦,而且创建比较快,没有语法检查)
> vue init webpack-simple vuedemo02
去到项目文件目录下,安装他所需要的各种包 (之前那个安装方法,如果没有报错就不用这步,但这样创建项目的话就要)
> cnpm insatll
跑项目:
> npm run dev
他上面有说项目运行的网址:我这里是http://localhost:8080/,具体看自己的。
5.我的开发工具选择用sublime text
这里是sublime text 3安装vue插件方法:(其实主要就是有这几步)
https://blog.****.net/a419419/article/details/77951759
1)ctrl+shift+p
2)选择第一项 Install package
3)然后不久就会弹出另一个界面,然后选择Vue.js Snippets,然后重复1) 2)操作 选择 Vue.js Syntax Hightlight
4)关掉sublime,重新打开,就会发现他可以识别后缀为 .vue的文件的语法了
SublimeTmpl 默认只有6种语法模板:
- html ctrl+alt+h
- javascript ctrl+alt+j
- css ctrl+alt+c
- php ctrl+alt+p
- ruby ctrl+alt+r
- python ctrl+alt+shift+p