碎碎念————记得刚开始用vue的时候手忙脚乱,也不知道干什么好,一步一步试着才走过来,这次重新写了个新功能,就顺便写个算是完整一点的过程,仅供刚入门的一个参考吧,有个大概的了解
正文————
三步使用vue-cli快速搭建一个项目
-
首先确保自己安装了node环境,可以使用npm
-
-
检查node版本:在cmd中输入
node -v 复制代码
-
检查npm版本:在cmd中输入
node -v 复制代码
然后,开始真正的创建项目了
-
全局安装vue-cli
npm i vue-cli -g` 复制代码
-
安装完成后,进入到自己的文件夹,当然,你cd进去也好,鼠标点进去也好,这个不重要.进去就行.
使用命令开始初始化创建自己的项目了.
vue init webpack test 复制代码
(这个test就是你自己的想要创建的项目名字)
? Project name (exprice) ---------------------项目名称 ? Project description (A Vue.js project)-----------项目描述 ? Author Datura --------------------- 项目创建者 ? Install vue-router? Yes ? Use ESLint to lint your code? (Y/n) no ---------------------是否启用eslint检测规则,这里个人建议选no ? Setup unit tests with Karma + Mocha? (Y/n) no ? Setup e2e tests with Nightwatch? (Y/n) no vue-cli · Generated "test". To get started: ----------- 这里说明如何启动这个服务 cd exprice npm install npm run dev 复制代码
-
ok,当你看见这个样子的时候,安装成功,根据上面提示的命令,继续往下,进入新建的项目,cd进去
最后跑起来,大功告成.
可以去看看自己的目录结构了.
(话说其实我都是有截图的,不过时间太长清理电脑了就没了,我又懒得在截一边,就文字了,感觉还是挺清晰的,毕竟是很久之前写的在电脑里存着没发的)
然后到这里,是一个官方的实例可以跑起来了,但是,如果新人的话可能还是会有点迷茫,从哪下手啊。不慌,还有下文
1.在src下面建文件夹 <建立你文件所需要的对应的目录结构> 我的
2.然后在router——index.js中配置路由
import Vue from 'vue'
import Router from 'vue-router'
import Home from '@/views/home/index.vue'
Vue.use(Router)
export default new Router({
routes: [{
path: '/',
name: 'Invite',
component: Invite
},
{
path: '/invite',
name: 'Invite',
component: Invite
}]
})
发一个意思意思版本的,我的index.js(片段,重点在步骤)
复制代码
2.vue中放内容测试页面之间跳转
基本到这里是可以了,往里面放自己的内容就好了
3.补充:如果缺少什么可以在按着提示对应安装一下 比如我的莫名缺少了css-loader style-loader vue-style-loader 然后npm i css-loader style-loader vue-style-loader -s安装 就可以了
我用的编辑器是vs code 然后当npm start为了让浏览器自己打开,可以按下面配置一下
pack.json中dev加--open "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",
不过有一点小烦的是每次打开项目都会自己打开。。。