目录
第一步:先安装npm环境,有的朋友直接跳过 -->
第二步:创建项目
第三步:修改配置文件
第一步:先安装npm环境,有的朋友直接跳过 -->
安装npm
首先:先从nodejs.org中下载nodejs --> nodejs官网
双击安装,在安装界面一直Next
直到Finish完成安装。
打开控制命令行程序(CMD),输入命令检查是否正常
如果要使用国内镜像cnpm可以输入以下命令
npm install -g cnpm --registry=https://registry.npm.taobao.org
第二步:创建项目
第一步:安装vue-cli
cnpm install vue-cli -g //全局安装 vue-cli
查看vue-cli是否成功,不能检查vue-cli,需要检查vue
选定路径,新建vue项目,要在那个目录下建项目就cd到目录路径
下面我一项目名为mountains新建vue项目
vue init webpack ”项目名称“
创建完成以后cd到项目路径下执行命令npm install 或者 cnpm install 来安装依赖包
启动命令:npm run dev 或 cnpm run dev
然后打开浏览器访问地址:127.0.0.1:8080
第三步:修改配置文件
我使用vscode打开刚创建的项目
右上角文件 > 打开文件夹 > 选择创建好的项目导入进来
项目导入进来先找到刚才的默认页面是哪里加载的
找到router文件下的index.js文件,这个是服务路由的配置文件
找到路由跟着引入地址找到刚才加载的实际vue页面
新建一个页面login.vue
让默认地址指向我们的login.vue
重新启动访问
可以看到,虽然我们的login页面加载了出来,但是有一个图片不是我们写的内容,这个就是vue的全局引入页面了
找到根目录的main.js打开
根据代码找到了App.vue页面,打开它
将这俩地方都注释,我们的页面就是本身的元素了