1.Vue CLI中文官网
2.全局安装webpack
npm install webpack -g
3. 全局安装vue 脚手架
npm install -g @vue/cli
用这个命令来检查其版本是否正确:
vue --version
npm install -g @vue/cli-init
4.vue脚手架使用webpack模板初始化一个项目
$ vue init webpack vue-demo
? Project name (vue-demo)
? Project name vue-demo
? Project description (A Vue.js project)
? Project description A Vue.js project
? Author (hang <zouxh_java@163.com>)
? Author hang <zouxh_java@163.com>
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n)
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n
? Use ESLint to lint your code? No
? Set up unit tests (Y/n) n
? Set up unit tests No
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
? Should we run `npm install` for you after the project has been created? (recom
mended) no
vue-cli · Generated "vue-demo".
# Project initialization finished!
# ========================
To get started:
cd vue-demo
npm install (or if using yarn: yarn)
npm run dev
Documentation can be found at https://vuejs-templates.github.io/webpack
5.运行项目
npm install
npm run dev
访问http://localhost:8080
6.vue-demo项目,内容介绍
build:打包工具webpack相关
config:配置信息,比如端口(config/index.js)
node_mode:项目安装的所有依赖(npm install)
src:编写代码文件夹
static:静态文件夹,可以存放图片
.babelrc:
.editorconfig:
.gitignore:
.postcssrc.js
index.html:首页内容
package.json:依赖信息
package-lock.json:依赖详细信息,版本号、去哪里下载等等
README.md:
7.项目运行过程
1.index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>vue-demo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
2.src/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'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({//创建实例
el: '#app',//挂载index.html的app元素
router,//路由相关,导入./router文件夹下的内容
components: { App },//使用组件app,上面导入进来的
template: '<App/>'// 如何渲染,模板使用了app组件
})
8.自定义一个组件
1.components下创建Hello.vue
<template>
<div>
<h1>你好,Hello,{{name}}</h1>
</div>
</template>
<script>
export default {
data(){
return{
name: "vue"
}
}
}
</script>
<style>
</style>
2.vue router
html添加
<!-- 使用 router-link 组件来导航. -->
<!-- 通过传入 `to` 属性指定链接. -->
<!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
<router-link to="/Hello">去hello</router-link>
<router-link to="/">去首页</router-link>
JavaScript
{
path: '/Hello',
name: 'Hello',
component: Hello
}
9.问题
- 1.error Failed at the chromedriver@2.46.0 install script.
npm install chromedriver --chromedriver_cdnurl=http://cdn.npm.taobao.org/dist/chromedriver
- 2.Module build failed: Error: ENOENT: no such file or directory, scandir ‘D:\0code\node_modules\node-sas’
1.cd 进入node_modules
2.运行npm rebuild node-sass
最后直接运行代码就OK了