Vue:第一个vue-cli项目
1.什么是vue-cli
2. 需要的环境
(1)确认nodejs安装成功
- cmd 下输入
node -v
查看是否能够正确打印出版本号即可! - cmd 下输入
npm-v
查看是否能够正确打印出版本号即可!- 这个npm,就是一个软件包管理工具,就和linux下的apt软件安装差不多!
(2)安装 Node.js 淘宝镜像加速器(cnpm)
- 为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/
- 不过建议先用npm,如果下载比较慢,再换成cnpm
输入:
npm install -g cnpm –registry=https://registry.npm.taobao.org
- 即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。
检查知否安装成功:
查看npm的安装地址:
C:\Users\Administrator\AppData\Roaming\npm
3. 搭建Vue-cli项目
(1)安装 vue-cli: 官方提供的一个脚手架
# 安装vue-cli
cnpm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模板创建 vue 应用程序,**通常我们选择 webpack**
# 原因:因为vue是ES6做开发的,但是现在还有很多ES5的,这时候webpack就可以做到降级来达到兼容性
vue list
(2)在cmd中切换到你想创建vue项目的目录
- 最好以管理员的方式进入cmd,不然可能会报错(可以管理员打开,然后再自己进到项目目录里面)【重点】
(3)执行初始化命令
# 这里的 myvue 是项目名称,可以根据自己的需求起名
vue init webpack myvue
一路都选择no即可;
说明:
Project name: 项目名称,默认 回车 即可
Project description: 项目描述,默认 回车 即可
Author: 项目作者,默认 回车 即可
Install vue-router: 是否安装 vue-router,选择 n 不安装(后期需要再手动添加)
Use ESLint to lint your code: 是否使用 ESLint 做代码检查,选择 n 不安装(后期需要再手动添加)
Set up unit tests: 单元测试相关,选择 n 不安装(后期需要再手动添加)
Setup e2e tests with Nightwatch: 单元测试相关,选择 n 不安装(后期需要再手动添加)
Should we run npm install for you after the project has been created:创建完成后直接初始化,选择 n,我们手动执行;运行结果!
(4)初始化并运行
# 切换到你的vue项目中
cd myvue
# 安装配置
npm install
# 启动服务,相当于后端的启动tomcat【重点】
cnpm run dev
# 停止服务
在cmd页面中,ctrl + c
出错以及解决方案:【不过一般都会提示如果修改问题】
vue项目初始化时npm run dev报错webpack-dev-server解决方法
原因:
- 这是新版webpack存在的BUG,卸载现有的新版本webpack,装老版本就好
- webpack-dev-server 版本需要从最新版本降低到如下版本,因为开始构建项目所用的插件版本太低
(1)npm uninstall webpack-dev-server
(2)npm install webpack-dev-server@2.9.1
(3)npm run dev
4.使用IDEA开发Vue项目:
1、使用idea打开刚刚创建好的vue项目
2、构建vue项目的运行
双击Ctrl可以看到我们可以设置的dev命令,当然最常用的还是run命令
葫芦画瓢就很容易构建成功了!
注:Idea中运行npm run dev
报不是内部或外部命令,也不是可运行的程序
的问题
解决方法:原文链接
- 路径:C:\Windows\System32\cmd.exe
- 修改以后重启idea得以解决,若是不行可能是其他配置的原因。
5.Vue-cli目录结构
我们用IDEA,open刚才的项目!
build 和 config:WebPack 配置文件
node_modules:用于存放 npm install 安装的依赖文件
src: 项目源码目录
static:静态资源文件
.babelrc:Babel 配置文件,主要作用是将 ES6 转换为 ES5
.editorconfig:编辑器配置
eslintignore:需要忽略的语法检查配置文件
.gitignore:git 忽略的配置文件
.postcssrc.js:css 相关配置文件,其中内部的 module.exports 是 NodeJS 模块化语法
index.html:首页,仅作为模板页,实际开发时不使用
package.json:项目的配置文件
name:项目名称
version:项目版本
description:项目描述
author:项目作者
scripts:封装常用命令
dependencies:生产环境依赖
devDependencies:开发环境依赖
1、src 目录
src
目录是项目的源码目录,所有代码都会写在这里
2、main.js
项目的入口文件,我们知道所有的程序都会有一个入口
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
components: { App },
template: '<App/>'
})
说明:
import Vue from 'vue':ES6 写法,会被转换成 require(“vue”); (require 是 NodeJS 提供的模块加载器)
import App from './App':意思同上,但是指定了查找路径,./ 为当前目录
Vue.config.productionTip = false:关闭浏览器控制台关于环境的相关提示
new Vue({...}):实例化 Vue
el: '#app':查找 index.html 中 id 为 app 的元素
template: '<App/>':模板,会将 index.html 中替换为组件元素
components: { App }:引入组件,使用的是 import App from ‘./App’ 定义的 App 组件;
3、App.vue
<template>
<div id="app">
<img src="./assets/logo.png">
<HelloWorld/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld'
export default {
name: 'App',
components: {
HelloWorld
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
说明:
template:HTML 代码模板,会替换 中的内容
import HelloWorld from ‘./components/HelloWorld’:引入 HelloWorld 组件,用于替换 template 中的
export default{…}:导出 NodeJS 对象,作用是可以通过 import 关键字导入
name: ‘App’:定义组件的名称
components: { HelloWorld }:定义子组件