- 在Node.js官网下载Node.js并安装(自带npm模块)
- 运行电脑cmd命令窗口,输入node -v以及npm -v查看是否安装成功
- 如果安装成功,输入npm install vue -g(全局目录下安装)
- 输入npm install vue-cli -g(全局安装vue脚手架,用来快速搭建vue项目)
- cd命令进入自己要创建项目的目录中
- 输入vue init webpack 项目名称,按照提示依次输入“项目名称”,“项目描述”,“作者”,“Install vue-router Yes”,“Use Eslint No”,“Set up unit tests No”,“Setup e2e tests No”
- 命令执行完毕,一个简单的vue项目就快速搭建好了
- 命令执行完毕后,窗口会有命令提示:cd 项目目录,然后输入npm run dev执行命令,执行成功会显示访问地址,一般是http://localhost:8080
如果在初始化项目过程中出现卡住不懂情况,ctrl+c结束命令,然后输入
npm cache clean --force
重新执行上面第6步
安装并使用axios
如果已经执行了npm run dev,可以ctrl+c结束该命令,返回命令行
输入npm install axios --save并执行命令。
输入npm run dev再次启动项目
在src目录的main.js中添加
import axios from ‘axios’
Vue.prototype.$ axios = axios
//($ 后无空格)全局注册,模块中使用方法为:this.$axios
使用示例(模块中):
export default {
created() {
this.$axios({
method: 'get',
url: '异步调用地址',
data: {} //传参
}).then((response) => {
console.log(response)
}).catch((error) => {
console.log(error)
})
}
}
安装并使用vuex
安装并使用sass 以及 node-sass
如果已经执行了npm run dev,可以ctrl+c结束该命令,返回命令行
npm install sass-loader --save
//sass-loader依赖于node-sass
npm install node-sass --save
在build目录下的webpack.base.conf.js文件中添加配置,如下位置
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: vueLoaderConfig
},
//...
//添加在此位置
{
test: /\.sass$/,
loaders: ['style', 'css', 'sass']
}
]
}
然后在vue文件的style标签处引入
<style lang="scss">
//你的sass代码
</style>
就可以使用sass预编译css样式了。