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.csdn.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种语法模板:

  1. html ctrl+alt+h
  2. javascript ctrl+alt+j
  3. css ctrl+alt+c
  4. php ctrl+alt+p
  5. ruby ctrl+alt+r
  6. python ctrl+alt+shift+p

猜你喜欢

转载自blog.csdn.net/R_Allison/article/details/81132863
今日推荐