文章目录
一、课程导学
一定要在解决问题的过程中养成使用新知识的思维习惯
二、环境准备
1.为什么需要单独准备环境?
2.Node 安装
3.创建项目
初始化项目
npx es10-cli create projectName
或是两步分开执行:
cnpm i es10-cli -g
es10-cli create projectName
如果安装失败,可以手动下载模板(安装失败的原因应该是create命令包含了clone和npm两部分,clone成功但是npm失败):
git clone https://github.com/cucygh/es-cli.git
cd es-cli
cnpm i
接下来手动下载安装的项目名称可以自行修改:
- 项目目录
- package.json
启动项目
cd projectName
npm start
访问项目
启动成功默认通过http://localhost:8080访问,界面显示如下:
4.编辑器配置
Atom
插件 | 作用 |
---|---|
atom-beautify | 代码格式化 |
autocomplete-paths | 路径自动补全 |
emmet | 快速生成html代码 |
file-type-icons | 文件图标 |
linter | 代码检查 |
linter-eslint | eslint检查 |
VSCode
插件 | 作用 |
---|---|
Beautify | 代码格式化 |
ESLint | eslint检查 |
settings.json
{
"eslint.autoFixOnSave": true,
"prettier.eslintIntegration": true,
"prettier.semi": false,
"prettier.singleQuote": true,
"javascript.format.insertSpaceBeforeFunctionParenthesis": true,
"vetur.format.defaultFormatter.html": "js-beautify-html",
"vetur.format.defaultFormatter.js": "vscode-typescript",
"vetur.format.defaultFormatterOptions": {
"js-beautify-html": {
"wrap_attributes": "force-aligned"
}
},
"eslint.validate": [
"javascript",
"html"
],
"eslint.options": {
"plugins": [
"html"
]
},
"window.zoomLevel": 1,
"editor.formatOnSave": true
}