下一篇学习element
https://blog.csdn.net/qq_34168515/article/details/118636234?spm=1001.2014.3001.5502
1、选择一个文件夹
创建一个 放置项目的 的文件夹
pj_front
2、打开编辑器
建议编译器为 Visual Studio Code
3、确保 node
- 建议 v12.14.0
- 查看版本 node -v
4、安装 vue 脚手架(全局,以后不需要安装)
- 第一步
npm i -g @vue/cli
- 确保在控制的状态(-g 全局)
- 默认安装最新的vue脚手架版本
- 注意网络问题,有可能导致安装不上,但是安装不上,千万不要灰心。再安装几次。
- 如果实在安装不上,可以采用 npm cache clean --force 进行强制清理,清理完再重新安装
- 清理完重新执行 npm i -g @vue/cli
- 如果实在安装不了,可能是网络问题,使用百度淘宝cnpm的安装办法,如下面所示
- 下面为各位同学演示淘宝cnpm的安装方法
- npm config set registry https://registry.npm.taobao.org
- 通过如下命令可以查看是否配置成功
- npm config get registry
- npm info express
- 如果需要恢复成原来的官方地址只需要执行如下命令:
- npm config set registry https://registry.npmjs.org
- 使用cnpm
- 安装淘宝的cnpm,然后在使用时直接将npm命令替换成cnpm命令即可
- npm install -g cnpm --registry=https://registry.npm.taobao.org
- 记得添加系统变量
- 重新安装脚手架
- cnpm i -g @vue/cli
5、创建项目
- 第二步
vue create ccz-vue
- 注意,不用人配置不一样,如果可以运行 vue 命令则可以忽略 如果使用 visual studio code, 在 VSCode 编辑器上方会弹出一个选择框,选择 “Commnad Prompt”
- 目前 vue版本为 vue3.x 学习建议从 vue2.x 开始
- 保证在需要创建文件夹 pj_front 下
- vue create 项目名
可以使用提前预定的快捷创建,也可以安装我以下的方法进行创建
建议 Manually select features :自己自定义创建
安装项目:
- less:css预编译
- babel:js编译器
- route:路由用
- vuex:存储
- eslint:语法检测
注意 空格为选中, 回车为确定
选择2.x版本
选择y
选择 Sass/SCSS(with node-sass)。(大神推荐)
选择第一个(大神推荐)
选择第一个,Lint on save,保存的时候进行检测
选择第一个,避免配置混乱
选择 y
选择yes 并命名为 vue-config-first
进入安装
安装完成
79 packages are looking for funding
run `npm fund` for details
⚓ Running completion hooks...
�📄 Generating README.md...
�🎉 Successfully created project ccz-vue.
�👉 Get started with the following commands:
$ cd ccz-vue
$ npm run serve
6、运行项目
进入项目
cd ccz-vue
运行项目
npm run server
> vue-cli-service serve
INFO Starting development server...
98% after emitting CopyPlugin
DONE Compiled successfully in 2840ms 20:16:48
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.1.105:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
7、效果
浏览器访问:http://localhost:8080/