环境快速配置
- 安装 Node.js
curl -O https://nodejs.org/dist/v10.15.1/node-v10.15.1.tar.gz
tar -xzvf node-v10.15.1.tar.gz
cd node-v10.15.1
./configure
make
make install
复制代码
- 使用npm install安装包时速度很慢,推荐使用淘宝 NPM 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
复制代码
- 建立软链
sudo ln -s /opt/node-v10.15.1-linux-x64/bin/npm /usr/local/bin/npm
sudo ln -s /opt/node-v10.15.1-linux-x64/bin/cnpm /usr/local/bin/cnpm
sudo ln -s /opt/node-v10.15.1-linux-x64/bin/node /usr/local/bin/node
复制代码
- 检查版本确认一下
mygodot@ubuntu:~ $ cnpm -v
cnpm@6.1.0 (/opt/node-v10.15.1-linux-x64/lib/node_modules/cnpm/lib/parse_argv.js)
npm@6.9.0 (/opt/node-v10.15.1-linux-x64/lib/node_modules/cnpm/node_modules/npm/lib/npm.js)
node@10.15.1 (/opt/node-v10.15.1-linux-x64/bin/node)
npminstall@3.22.0 (/opt/node-v10.15.1-linux-x64/lib/node_modules/cnpm/node_modules/npminstall/lib/index.js)
prefix=/opt/node-v10.15.1-linux-x64
linux x64 4.10.0-28-generic
registry=https://r.npm.taobao.org
mygodot@ubuntu:~ $ npm -v
6.4.1
mygodot@ubuntu:~ $ node -v
v10.15.1
复制代码
- 安装 Vue 脚手架,并且建立软链,记得检查(
vue -V
)是否安装成功
cnpm install -g vue-cli
sudo ln -s /opt/node-v10.15.1-linux-x64/bin/vue /usr/local//bin/vue
复制代码
- 最后,相信你已经厌烦了每次全局安装后都去建立软链接,可以在安装完npm或cnpm后,使用以下命令将安装路径指向/usr/local,一次到位^.^
npm config set prefix /usr/local
cnpm config set prefix /usr/local
设置完之后可以使用下列命令进行查看。
npm root -g
cnpm root -g
复制代码
- 终于结束了麻烦的环境配置,现在正式进入 Vue 体验之旅,
Talk is cheap. Show me the code!
创建项目
- 执行以下命令快速构建
vue init webpack myproject
#出现的选项按需选择就行
cd myproject
cnpm install
cnpm run dev
复制代码
- 这是时候就会自动打开端口
http://localhost:8080
查看页面就OK了
- 文件目录结构
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- utils.js // 构建工具相关
| |-- vue-loader.conf.js // webpack loader配置
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置,构建开发本地服务器
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试脚本的配置
|-- src // 源码目录
| |-- components // vue所有组件
| |-- router // vue的路由管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
|-- test // 测试文件
| |-- e2e // e2e 测试
| |-- unit // 单元测试
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .eslintignore // eslint检测代码忽略的文件(夹)
|-- .eslintrc.js // 定义eslint的plugins,extends,rules
|-- .gitignore // git上传需要忽略的文件格式
|-- .postcsssrc // postcss配置文件
|-- README.md // 项目说明,markdown文档
|-- index.html // 访问的页面
|-- package.json // 项目基本信息,包依赖信息等
复制代码
- 快速上手
<template>
<div class="hello">
<h1>{{ msg }}</h1>
<div v-html="msg2"></div>
<div>
<p>{{ message | capitalize }}</p>
<input v-model="message">
</div>
<div>
<p>{{ message2 }}</p>
<button v-on:click="reverseMessage">反转按钮</button>
</div>
<div :class="classObject">样式属性测试</div>
</div>
</template>
<script>
export default {
name: 'helloworld',
data () {
return {
msg: '文本插值测试',
msg2:'<p>html页面插值测试</p>',
message2:"事件绑定测试",
message:"hello world!(数据双向绑定测试+过滤功能测试)",
classObject:{
active:true,
"text-danger":true
}
}
},
methods: {
reverseMessage: function(){
this.message2 = this.message2.split('').reverse().join('')
}
},
filters: {
capitalize: function (value) {
if (!value) return ''
value = value.toString()
return value.charAt(0).toUpperCase() + value.slice(1)
}
}
}
</script>
<style>
.active {
width: 100px;
height: 100px;
background:
margin:auto;
}
.text-danger {
background:
}
</style>
复制代码
<template>
<div id="app">
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default{
name: 'app',
components:{
HelloWorld
}
}
</script>
<style>
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
font-size:22px;
font-weight:bold;
color:
margin-top: 60px;
}
</style>
复制代码
最后的话
- Vue 确实上手容易,作为一个写过一点js,没有接触过前端框架的菜鸟,照着官方文档能够迅速写出demo,怪不得如此流行,写起来逻辑清晰舒服,不出意外会继续折腾,毕竟vuex、vue-router 等全家桶系列还多着呢(逃
学习资源