Vue-CLI 项目搭建
1、环境搭建
- 安装node
官网下载安装包，傻瓜式安装：https://nodejs.org/zh-cn/
- 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装脚手架
cnpm install -g @vue/cli
- 清空缓存处理
npm cache clean --force
2、项目的创建
- 创建项目
vue create 项目名
// 要提前进入目标目录(项目应该创建在哪个目录下)
// 选择自定义方式创建项目，选取Router, Vuex插件
-
设置配置
上面的第一条，也就是 default-project 这一个选项在你第一次创建项目的时候是并不会出现的，只有你第一次创建完成项目后回提示你保存为默认配置模板，下次新建项目的时候就可以使用你选用的配置快速新建项目了，不需要再重新选择配置项目了。
废话有点多，我们继续介绍这里显示的选项。
这里的第二条选项便是 vue cli 3 默认的项目模板，包含 babel 和 eslint。
第三条选项便是自主选择你项目所需的配置。
这里由于默认模板没有啥展示的必要所以我们便选择手动配置。
注意：这里要特别说明 空格是选中，enter是确定，上下是移动左侧蓝色>（
）光标。同时 我们在这里建议所有关于（y/n）的选项都选择大写的选项，这里的大写是系统推荐选项
-
自定义配置
自定义配置中，您将会看到这些配置项：
选择完成后回车进入下一步
-
选择功能
这里因为，Vue-CLI项目的页面是直接用子组件来渲染页面，不会有页面的跳转，历史纪录里面没有浏览记录，这里选择 y 会记录你浏览了哪些子组件，约等于记录你的浏览记录作为历史记录
-
代码风格和eslint
这里选的是ESLint with error prevention only， 个人比较习惯这种风格，具体怎么选择看个人习惯吧。
-
选择 保存时检查 / 提交时检查
-
选择配置信息存放位置，单独存放或者并入package.json
这里如果你选择In dedicated config files，则会将配置信息存放在配置文件config 里面。方便管理
这里如果你选择 In package.json，则会将配置信息存放在package.json文件里面。用json存放配置信息
-
是否保存本次创建项目的配置项，用于下次快速创建项目
如果你选择 y 则代表你这次选择的配置会被记录下来，以后再创建都会套用这一次的配置。如果你想选择其他配置则需要将node卸载重装。
如果你选 n 下一次创建项目的时候还会需要你进行配置
-
创建项目
-
创建成功
-
启动/停止项目
npm run serve / ctrl+c
// 要提前进入项目根目录
- 打包项目
npm run build
// 要在项目根目录下进行打包操作
3、认识项目
- 项目目录
dist: 打包的项目目录(打包后会生成)
node_modules: 项目依赖
public: 共用资源
src: 项目目标,书写代码的地方
-- assets:资源
-- components:组件
-- views:视图组件
-- App.vue:根组件
-- main.js: 入口js
-- router.js: 路由文件
-- store.js: 状态库文件
vue.config.js: 项目配置文件(没有可以自己新建)
- 配置文件：vue.config.js
module.exports={
devServer: {
port: 8888
}
}
// 修改端口,选做
- main.js
new Vue({
el: "#app",
router: router,
store: store,
render: function (h) {
return h(App)
}
})
- .vue文件
<template>
<!-- 模板区域 -->
</template>
<script>
// 逻辑代码区域
// 该语法和script绑定出现
export default {
}
</script>
<style scoped>
/* 样式区域 */
/* scoped表示这里的样式只适用于组件内部, scoped与style绑定出现 */
</style>