vue入门教程(2):创建我的第一个vue.js工程

快乐鱼儿 1年前 ⋅ 682 阅读

1: Vue.js
https://v3.cn.vuejs.org/
https://www.runoob.com/w3cnote/vue2-start-coding.html
https://www.runoob.com/vue3/vue3-tutorial.html

下载安装Vue Devtools网页调试工具(devtools-5.3.3):https://github.com/vuejs/vue-devtools

1、安装node.js (为了用npm)
下载最新:https://nodejs.org

安装配置nodeJs环境变量:
PATH: D:\Program Files (x86)\nodejs\node_global
NODE_PATH: D:\Program Files (x86)\nodejs\node_modules

版本:
#node -v
#npm -v

2、在devtools-5.1.1 该目录敲安装命令:
# cd devtools-5.3.3 (坑)
# cd devtools-5.1.1
# npm i
修改manifest.json文件:false改成true即可
# npm run build


1)npm安装 webpack:
# npm i webpack -g
# npm i webpack-cli -g
版本: webpack -v

2)npm安装vue.js
# npm install vue -g

3)npm安装vue-router:
# npm install vue-router -g

4)npm安装vue脚手架:
# npm install vue-cli -g


版本: # vue -V



其它报错情况:
删除webpack和webpack-cli:
# npm uninstall -g webpack webpack-cli
为了以防万一:
去安装路径下删除 webpack和webpack-cli命名的所有文件
重新安装
# npm install -g webpack webpack-cli
升级npm:
# npm i -g npm

 

3、在chrom 中安装找到扩展程序(更多工具-> 扩展程序)
  1) 打开开发者模式
  2)加载已解压的扩展程序

 


4、*****开始创建我的Vue项目*****
在硬盘上找一个文件夹放工程用的,在终端中进入该目录:
# cd D:/VueProjects

创建项目
# vue init webpack-simple myVue1(项目名称)

进入创建的工程目录
# cd D:/VueProjects/myVue1

安装项目依赖
# npm install

安装 vue 路由模块vue-router和网络请求模块vue-resource
# npm install vue-router vue-resource --save


编译打包项目
# npm run build

启动项目
# npm run dev

浏览器访问:localhost:8080 即可打开页面。
开始 Vue 之旅!!!
Ctrl+C 结束命令。


全部评论: 0

    我有话说: