vue-cli脚手架和webpack-simple模板项目
2018-10-16 12:23
1026 查看
vue-cli 是一个官方发布 vue.js 项目脚手架，使用 vue-cli 可以快速创建 vue 项目。
GitHub地址是：https://github.com/vuejs/vue-cli
一、安装Nodejs
首先需要安装Node环境，详见：
安装完成之后，可以在命令行工具中输入node -v和npm -v,如果能显示出版本号，就说明安装成功。
MacBook-Pro:~ hqs$ node -v v6.10.3 MacBook-Pro:~ hqs$ npm -v 3.10.10
二、安装vue-cli
安装好node之后，我们就可以直接全局安装vue-cli:
MacBook-Pro:~ hqs$ npm install -g vue-cli npm WARN deprecated coffee-script@1.12.7: CoffeeScript on NPM has moved to "coffeescript" (no hyphen) /usr/local/bin/vue-init -> /usr/local/lib/node_modules/vue-cli/bin/vue-init /usr/local/bin/vue -> /usr/local/lib/node_modules/vue-cli/bin/vue /usr/local/bin/vue-list -> /usr/local/lib/node_modules/vue-cli/bin/vue-list /usr/local/lib `-- vue-cli@2.9.6 +-- async@2.6.1 | `-- lodash@4.17.11 +-- chalk@2.4.1 | +-- ansi-styles@3.2.1 | | `-- color-convert@1.9.3 | | `-- color-name@1.1.3
使用这种方式可能会安装比较慢，推荐大家使用国内的淘宝镜像来安装。(之前安装过了就不过多赘述了)
cnpm install -g vue-cli
如果安装失败，可以使用 npm cache clean 清理缓存，然后再重新安装。后面的安装过程中，如有安装失败的情况，也需要先清理缓存。
安装完成后，可以使用vue -V(大写的V)查看vue的版本。
MacBook-Pro:~ hqs$ vue -V 2.9.6
三、使用vue-cli
1、vue -help：查看脚手架命令和帮助信息
MacBook-Pro:~ hqs$ vue -help Usage: vue <command> [options] Options: -V, --version output the version number -h, --help output usage information Commands: init generate a new project from a template list list available official templates build prototype a new project create (for v3 warning only) help [cmd] display help for [cmd]
2、vue list 查看可用的官网模板
MacBook-Pro:~ hqs$ vue list Available official templates: ★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ★ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ★ pwa - PWA template for vue-cli based on the webpack template ★ simple - The simplest possible Vue setup in a single HTML file ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping.
Vue.js官方提供了两种类型的模板项目：
- 基于vue cli和browserify的项目模板
- 基于vue cli和webpack的项目模板
vue cli是Vue.js官方提供的命令行创建Vue.js项目脚手架的工具。这两种类型的项目模板分别提供了简单模式和完全模式，简单模式仅包含基于vue.js开发必要的一些资源和包，使用该模式可以快速地投入到开发。完全模式则还包括ESLink、单元测试等功能。
在这里使用webpack的项目模板。因为webpack比较厉害。
四、webpac-simple 基于webpack的简单模板生成
1、首先一定要先使用命令行工具切换到你当前的目录下
MacBook-Pro:vue_webpack_test hqs$ pwd /Users/hqs/PycharmProjects/vue_webpack_test
2、初始化项目
MacBook-Pro:vue_webpack_test hqs$ vue init webpack-simple my-project ? Project name my-project ? Project description A Vue.js project ? Author hhh ? License MIT ? Use sass? No vue-cli · Generated "my-project". To get started: cd my-project npm install npm run dev
（1）命令参数
- nit :初始化我们的项目。
- webpack-simple:使用的哪个模板，这里我们先使用webpack-simple模板
- my-project:表示我们项目的名字，这名字可以自己命名，但不要起成系统软件的一些名字，比如vue，node，npm等
（2）执行中填写的信息详解
3、下载依赖包及启动项目
（1）切换到当前项目
MacBook-Pro:vue_webpack_test hqs$ cd my-project/ MacBook-Pro:my-project hqs$ ls README.md package.json webpack.config.js index.html src MacBook-Pro:my-project hqs$ pwd /Users/hqs/PycharmProjects/vue_webpack_test/my-project
（2）下载当前项目依赖包
npm install
（3）启动当前项目
MacBook-Pro:my-project hqs$ npm run dev > my-project@1.0.0 dev /Users/hqs/PycharmProjects/vue_webpack_test/my-project > cross-env NODE_ENV=development webpack-dev-server --open --hot Project is running at http://localhost:8080/webpack output is served from /dist/ 404s will fallback to /index.html
项目启动后，自动弹出如下页面，如此证明项目启动成功了。
五、vue-cli脚手架项目中组件的使用
1、项目目录结构
（1）项目入口文件——main.js文件
（2）webpack配置文件——webpack.config.js
module.exports = {
entry: './src/main.js', // 进入入口
output: { // 输出入口
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.css$/,
use: [
'vue-style-loader', // 让组件支持样式加载
'css-loader' // css支持
],
}, {
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader', // 支持ES6语法
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader', // png、jpg等文件支持打包
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: { // 为vue/dist/vue.esm.js起别名：vue$
'vue$': 'vue/dist/vue.esm.js'
},
extensions: ['*', '.js', '.vue', '.json'] // 文件后缀名为js/vue/json的，可以省略不写
},
devServer: {
historyApiFallback: true,
noInfo: true,
overlay: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
（3）npm生成的依赖包文件——package.json
{
"name": "my-project",
"description": "A Vue.js project",
"version": "1.0.0",
"author": "hhh",
"license": "MIT",
"private": true,
"scripts": {
// npm run dev
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
// webpack打包用的东西
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": { // 项目依赖
"vue": "^2.5.11"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
],
"devDependencies": { // 开发依赖
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.0",
"babel-preset-stage-3": "^6.24.1",
"cross-env": "^5.0.5",
"css-loader": "^0.28.7",
"file-loader": "^1.1.4",
"vue-loader": "^13.0.5",
"vue-template-compiler": "^2.4.4",
"webpack": "^3.6.0",
"webpack-dev-server": "^2.9.1"
}
}
需要注意的是json文件是不能用//或者/**/来添加注释的。
（4）上传github忽略配置文件——.gitignore
.DS_Store node_modules/ dist/ npm-debug.log yarn-error.log # Editor directories and files .idea *.suo *.ntvs* *.njsproj *.sln
（5）编辑配置文件——.editorconfig
编写代码tab默认缩进为2个空格，indent_size = 4就是tab缩进的大小，默认是2，将其修改为4。
root = true [*] charset = utf-8 indent_style = space indent_size = 4 end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true
2、一个.vue文件就是一个组件
在webpack-simple模板中，包括webpck模板。一个.vue文件就是一个组件。
为什么会这样呢？因为webpack干活了！webpack的将我们所有的资源文件进行打包。同时webpack还能将我们的html（template）、css、js文件通过模板编译的方式将这些文件打包成一个.vue的文件。
项目包中的App.vue文件
<template>
<div id="app">
<img src="./assets/logo.png">
<h1>{{ msg }}</h1>
<h2>Essential Links</h2>
<ul>
<li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
<li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
<li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
<li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
</ul>
<h2>Ecosystem</h2>
<ul>
<li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
<li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
<li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
<li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
</ul>
</div>
</template>
<script>
export default {
name: 'app',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</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;
}
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
上面代码 有三部分，template标签中就是我们要写的组件结构，script标签中就是我们要写的业务逻辑，style标签中就是我们要写的该组件的样式。这三部分，我们通过vue-loader这个插件，将这三部分共同组合成了一个.vue文件。我们称这种.vue的文件就是一个组件。
另外上面的代码，我们发现有个export default语法，其实呢，这个东西，跟我们的python模块化有点类似。在es6 Module中，webpack这个工具通过babel-loader这个loader将我们的es6 Module语法进行解析，从而让我们的export default语法和import 'xxx'语法在浏览器中识别。
我们总结一句话：export default xxx 就是抛出一个模块（一个js文件就是一个模块)， import 'xxx' from 'aaa'就是从刚刚抛出的文件路径中，导入此模块。有import就一定有export default.
3、重写App.vue加深理解
（1）一个组件由三部分组成：template、script、style
<template> <!--页面的结构--> <div class=""></div> </template> <script> // 页面的业务逻辑，注意这里并不是js，不要添加type='javascript' </script> <style> /*该组件的样式属性*/ </style>
（2）export default语法
export default xxx 就是抛出一个模块（一个js文件就是一个模块)，import App from './App.vue' 就是从刚刚抛出的文件路径中，导入此模块。有import就一定有export default.
因为在main.js中有：
import App from './App.vue'
所以，我们必须在当前组件中写入export default,那么后面的书写就是用到了咱们之前的学习的语法。
<template>
<!--页面的结构-->
<div class="app">
<h3>{{msg}}</h3>
</div>
</template>
<script>
// 页面的业务逻辑，注意这里并不是js，不要添加type='javascript'
export default { // 抛出来一个对象
name: 'App', // 代指组件名字
data(){ // 数据属性
return {
//必须是一个函数，要有返回值，返回空对象也是有返回值
msg:'hello 组件'
}
}
}
</script>
<style>
/*该组件的样式属性*/
</style>
（3）启动项目页面显示
MacBook-Pro:my-project hqs$ npm run dev > my-project@1.0.0 dev /Users/hqs/PycharmProjects/vue_webpack_test/my-project > cross-env NODE_ENV=development webpack-dev-server --open --hot Project is running at http://localhost:8080/
页面效果显示如下：
那么接下来我们就可以在App.vue组件中将我们之前学习到的知识运用进来。
4、多组件解耦构建页面
（1）构建各组件
首先创建/src/components文件夹。再创建页首、页中、页脚三个组件：
编辑各组件代码：
############Vheader.vue###########
<template>
<header class="nav">
我是header
</header>
</template>
<script>
export default {
name: "vheader",
data(){
return {
}
}
}
</script>
<style scoped>
</style>
############Vcontent.vue###########
<template>
<div class="wrap">
我是中心内容
</div>
</template>
<script>
export default {
name: "vcontent",
data(){
return {
}
}
}
</script>
<style scoped>
</style>
############Vfooter.vue###########
<template>
<footer class="foot">
我是footer
</footer>
</template>
<script>
export default {
name: "vfooter",
data(){
return {
}
}
}
</script>
<style scoped>
</style>
（2）在父组件App.vue中引入子组件并挂载
<template>
<!--页面的结构-->
<div class="app">
<h3>{{msg}}</h3>
<p>嘿嘿</p>
<Vheader></Vheader>
<Vcontent></Vcontent>
<Vfooter></Vfooter>
</div>
</template>
<script>
// 在父组件中引入子组件
import Vheader from './components/Vheader.vue'
import Vcontent from './components/Vcontent'
import Vfooter from './components/Vfooter'
// 页面的业务逻辑，注意这里并不是js，不要添加type='javascript'
export default { // 抛出来一个对象
name: 'App', // 代指组件名字
data() { // 数据属性
return {
//必须是一个函数，要有返回值，返回空对象也是有返回值
msg: 'hello 组件'
}
},
components:{ // 挂载组件
// Vheader:Vheader
Vheader,
Vcontent,
Vfooter
}
}
</script>
<style scoped>
/*该组件的样式属性*/
</style>
（3）页面显示
（4）style样式解耦
写每个组件style都要加 scoped ，当前的样式属性仅对当前的标签结构起作用，与其他组件无关。
对样式解耦。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- vue-cli 脚手架的使用，及webpack模板与webpack-simple的区别
- 关于使用Vue-cli脚手架配合webpack-simple构建项目操作流程（自用）
- 转：vue-cli的webpack模板项目配置文件分析
- 用Vue-cli生成vue+webpack的项目模板
- vue-cli的webpack模板项目配置文件分析，配置信息详解
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue-cli的webpack模板项目配置文件的理解
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli的webpack模板项目配置文件分析
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue-cli的webpack模板项目配置文件说明
- vue-cli的webpack模板项目配置文件分析
- csdn上看到的一篇关于vue-cli的webpack模板项目配置文件分析
- 用Vue-cli生成vue+webpack的项目模板怎么设置为vue1.0版本？
- vue-cli的webpack模板项目配置文件分析
- vue-cli生成vue+webpack的项目模板怎么设置为vue1.0
- vue-cli的webpack模板项目配置文件分析
- [置顶] vue-cli的webpack模板项目配置文件分析
- vue-cli webpack模板项目搭建及打包时路径问题的解决方法