第一步:检查有没有安装 node 和 npm 检查命令,node -v ; npm -v
第二步:切换淘宝镜像
$ npm get registry #查看原本镜像
$ npm config set registry http://registry.npm.taobao.org/ #修改成淘宝镜像
$ npm config set registry https://registry.npmjs.org/ #镜像还原
第三步:安装vue-cli脚手架,一定要是管理员身份去运行,否则会权限不够,安装报错
权限不够报错关键信息:npm ERR! Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/docsify-cli'
安装命令 npm install -g @vue/cli
注意: 在macOS的终端中安装时需要在安装命令前面输入sudo
第四步: 在vscode里面去创建项目
运行以下命令创建项目
vue create hello-world
通过上下键选择预设 回车继续运行,如果选择的是vue2或者3,会自动帮你配置对应的项目,babel和eslint都不需要自己设置,一敲回车就会自动运行
但是!初学者还是建议选最后一个选项,Manually select features, 自己手动去选择自己需要哪些配置项。
过程如下
1.选择你需要在项目中安装哪些功能,这个根据自己的需要来,上下键移动,空格键选中,勾选之后回车运行
2.选择vue版本
3.Use history mode for router? //在生产中需要适当的服务器设置用于索引回退,输入Yes 或者No
4.Pick a CSS pre-processor //选择css预处理器
Sass安装需要Ruby环境,是在服务端处理的,SCSS 是 Sass3新语法(完全兼容 CSS3且继承Sass功能)
LESS //Less最终会通过编译处理输出css到浏览器,Less 既可以在客户端上运行,也可在服务端运行 (借助 Node.js)
Stylus //Stylus主要用来给Node项目进行CSS预处理支持,Stylus功能上更为强壮,和js联系更加紧密,可创建健壮的、动态的的CSS。
5.Pick a linter / formatter config //选择语法检测工具
ESLint with error prevention only --- 仅错误预防
ESLint + Airbnb config ---Airbnb配置
ESLint + Standard config ---标准配置
ESLint + Prettier
6.Pick additional lint features //选择语法检查方式 选lint on save 保存就检查
7.Where do you prefer placing config for Babel, ESLint, etc.? //配置文件放于哪里
In dedicated config files // 独立文件放置
In package.json // 放package.json里
8.Save this as a preset for future projects? //将此保存为将来项目的预设?
如果预设的话,起个名字,下次创建项目可以使用该模板直接创建,不用再次选择 ,在第一步选择预设的名字即可,因为很多功能不太熟,这里选择No,然后项目开始创建
创建成功
然后直接跟着上面给出的命令去运行就好了,一般运行好了之后不会自动打开浏览器,需要在启动命令后面加上 --open
"serve": "vue-cli-service serve --open",
进入之后就可以看到vue项目的起始页面
想要在代码中保存之后,页面自动刷新。命令行敲如下代码,下载了这个东西就不用每次都手动刷新了
npm install webpack-dev-server
其他知识点:
router/ index.js
// 导入vue 和 vueRouter的包
import Vue from 'vue'
// 构造函数 VueRouter
import VueRouter from 'vue-router'
// 导入需要的组件(页面)
import loginView from '../views/login.vue'
import homeView from '../views/HomeView.vue'
import aboutView from '../views/AboutView.vue'
import tab1 from '../components/tab1.vue'
import tab2 from '../components/tab2.vue'
// Vue.use() 导入Vue是为了调用.use()函数,把vueRouter安装为vue项目的插件
Vue.use(VueRouter)
const routes = [
{
path: '/',
redirect: '/login' //路由重定向
},
{
path: '/login', //hash地址
component: loginView //所对应的组件
},
{
path: '/home',
component: homeView,
// redirect: '/home/tab1',
// children 声明子路由规则,子路由规则一般不加斜线
children:[
// 如果children数组中,某个路由规则的path值为空字符串,则这条路由规则,叫做默认子路由,和重定向二选一,一样的效果
{ path: '', component: tab1 },
{ path: 'tab2', component: tab2 },
]
},
{
path: '/about',
component: aboutView
}
]
// 创建路由实例对象
const router = new VueRouter({
// routes是一个数组:定义hash地址与组件之间的对应关系
routes
})
// 向外共享路由的实例对象
export default router
main.js
//导入vue这个包,得到vue这个构造函数
import Vue from 'vue'
//导入App.vue这个根组件,渲染到html页面中
import App from './App.vue'
// 导入路由模块,拿到路由实例模块
import router from './router'
//创建vue的实例对象
new Vue({
// 在vue项目中要想把路由用起来,需要挂载路由实例对象
router,
// 把render函数指定的组建,渲染到html页面指定区域中,用render函数指定的页面替换掉
render: h => h(App)
}).$mount('#app')
//$mount() 指定要替换的区域,相当于初学时的el挂载器